Customizing styles

Reference

For more detail about possible style overrides, see the Reference page.

Version 1

Updating the `global` object impacts these elements:

Updating the primaryButton object impacts these elements:

Updating the secondaryButton object impacts these elements:

Version 2

You can customize styles for almost all the visual elements throughout the Dromo Uploader.

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"
        }
    }
}