Skip to main content
For more detail about possible style overrides, see the Reference page.
You can customize styles for almost all the visual elements throughout the Dromo Uploader. Upload screen Set header screen Matching screen Clean data screen Review screen

​
Basic Example​

In this example, we change the text color to dark gray, the primary button to blue, and the secondary button to red. 
const settings = {
  styleOverrides: {
    global: {
      textColor: "#394b59",
      customFontURL: "https://fonts.googleapis.com/css2?family=Open+Sans&display=swap",
      customFontFamily: "'Open Sans', sans-serif"
    },
    primaryButton: {
      borderRadius: "0.25rem",
      backgroundColor: "#1a4a7a",
      textColor: "#ffffff",
      border: "1px solid #1a4a7a",
      hoverBackgroundColor: "#006bef",
      hoverTextColor: "#ffffff",
      hoverBorder: "1px solid #006bef"
    },
    secondaryButton: {
      borderRadius: "0.25rem",
      backgroundColor: "#b0276b",
      textColor: "#ffffff",
      border: "1px solid #b0276b",
      hoverBackgroundColor: "#5c656d",
      hoverTextColor: "#fffff",
      hoverBorder: "1px solid #5c656d"
    }
  }
}

​
Table Styling

You can also customize the appearance of the data table including headers, selection, and cell styling: 
const settings = {
  styleOverrides: {
    dataTable: {
      // Column header styling
      headerBackgroundColor: "#f8f9fa",
      headerTextColor: "#495057",
      headerFontWeight: "600",

      // Active/highlighted headers
      headerActiveBackgroundColor: "#e9ecef",
      headerActiveTextColor: "#212529",

      // Row numbers styling
      rowHeaderBackgroundColor: "#f1f3f4",
      rowHeaderTextColor: "#6c757d",

      // Cell selection
      cellSelectionBorderColor: "#007bff",
      cellSelectionBackgroundColor: "rgba(0, 123, 255, 0.1)",

      // General accent color for interactive elements
      accentColor: "#007bff"
    },
    modalOverlay: {
      backgroundColor: "#000000",
      opacity: "30"
    }
  }
}