Style Overrides

object

Style overrides that affect the general UI of the Dromo Uploader

string

The primary text color

string

The secondary text color

string

A URL to a custom font file

string

The name of the font family provided by the custom font file

string

default:"#ffffff"

Added in v2The background color of the modal

string

default:"8px"

Added in v2The border radius of the modal

string

default:"none"

Added in v2The border style of the modal

string

default:"none"

Added in v2The border width of the modal

string

default:"none"

Added in v2The border color of the modal

string

default:""

The general text color for UI elements

string

default:""

Color used for success states and messages

string

default:""

Color used for warning states and messages

boolean

default:"true"

Whether to apply a blur effect to the background when modals are open

object

default:"{}"

Style overrides for the primary action button

string

The radius of the button

string

The background color of the button

string

The color of the text in the button

string

The border shorthand property to apply to the button

string

The background color of the button while hovering

string

The text color of the button while hovering

string

The border shorthand property to apply to the button while hovering

string

default:"#e5e7eb"

The background color of the button when it is disabled

string

default:"#6b7280"

The text color of the button when it is disabled

string

default:"8px 12px"

The padding of the button

object

default:"{}"

Style overrides for the secondary action button

string

The radius of the button

string

The background color of the button

string

The color of the text in the button

string

The border shorthand property to apply to the button

string

The background color of the button while hovering

string

The text color of the button while hovering

string

The border shorthand property to apply to the button while hovering

string

default:"#e5e7eb"

The background color of the button when it is disabled

string

default:"#6b7280"

The text color of the button when it is disabled

string

default:"8px 12px"

The padding of the button

object

default:"{}"

Style overrides for the tertiary action button

string

The radius of the button

string

The background color of the button

string

The color of the text in the button

string

The border shorthand property to apply to the button

string

The background color of the button while hovering

string

The text color of the button while hovering

string

The border shorthand property to apply to the button while hovering

string

default:"#e5e7eb"

The background color of the button when it is disabled

string

default:"#6b7280"

The text color of the button when it is disabled

string

default:"8px 12px"

The padding of the button

object

default:"{}"

Style overrides for the file dropzone on the upload screen

number

default:"2"

The width of the dropzone border in pixels

number

default:"8"

The radius of the dropzone border in pixels

string

The color of the dropzone border

string

default:"dashed"

The style of the dropzone border

string

The background color of the dropzone

string

The text color of the dropzone message

string

The outline property of the dropzone

string

The border color while a file is being dragged over the dropzone

string

The border color when the dragged file can be accepted

string

The border color when the dragged file cannot be accepted

object

default:"{}"

Style overrides for the help text boxes

string

The text color of the help text

string

The background color of the help text box

object

default:"{}"

Style overrides for the progress bar in the header

string

The color of completed steps

string

The color of steps that have not been started yet

string

The color of the step currently in progress

string

default:"1rem"

Added in v2The font size of the step text

string

default:"bold"

Added in v2The font weight of completed steps

string

default:"normal"

Added in v2The font weight of incomplete steps

string

default:"bold"

Added in v2The font weight of the current step

string

Added in v2The background color of the stepper bar

string

Added in v2The bottom border separating the stepper bar from the rest of the modal

object

default:"{}"

Style overrides for the data table (Handsontable) component

string

The font weight of column headers

string

The background color of column headers

string

The text color of column headers

string

The background color of row headers (row numbers)

string

The text color of row headers (row numbers)

string

The background color of the corner header (top-left cell)

string

The border color of selected cells

string

The background color of selected cells

string

General accent color that affects various interactive elements in the table

string

The background color of active column headers

string

The text color of active column headers

string

The background color of highlighted column headers

string

The text color of highlighted column headers

string

The background color of body cells

string

The text color of body cells

string

The background color of a hovered cell

string

The text color of a hovered cell

string

The background color of alternating odd rows

string

The background color of a selected row

string

The border color of a selected row

string

The outer border color of the table

string

The color of grid lines between rows and columns

string

The background color of cells with error messages

string

The hover background color of cells with error messages

string

The background color of cells with warning messages

string

The hover background color of cells with warning messages

string

The background color of cells with informational messages

string

The hover background color of cells with informational messages

string

The background color of read-only cells

string

The text color of read-only cells

Style overrides for modal overlay backdrop

string

The background color of the modal overlay

string

default:"50"

The opacity of the modal overlay (0-100)

object

default:"{}"

Style overrides for cards used in column matching and other importer screens.

string

The card background color

string

The background color of the area containing cards

string

The card border color

string

The card border width

string

The card border radius

string

The card text color

string

The background color of expanded cards

string

The color of icons in cards

Style overrides for select controls and dropdown menus.

string

The background color of the closed control

string

The control border color

string

The selected value text color

string

The control border color in an error state

The background color of the open menu

string

The background color of a hovered option

string

The background color of the selected option

object

default:"{}"

Style overrides for the Error Navigator panel shown during the Review Step when enableNavigatingErrors is true. All color values accept any valid CSS color string (hex, rgb, hsl, CSS variables, etc.).

string

default:"#CD0013"

Color applied to error-level indicator icons, error message text, and the error issue count badge.

string

default:"#CA8A04"

Color applied to warning-level indicator icons and warning message text.

string

default:"Dromo blue"

Color applied to the primary action buttons (“Replace”, “Apply”) and the active column filter chip border and text.

string | null

default:"null"

URL of a custom image to display in place of the default exclamation circle icon for error rows. The image renders at 12×12 px with object-contain. Set to null to use the default icon.

string | null

default:"null"

URL of a custom image to display in place of the default exclamation circle icon for warning rows. The image renders at 12×12 px with object-contain. Set to null to use the default icon.

styleOverrides: {
  errorNavigator: {
    errorColor: "#B91C1C",
    warningColor: "#D97706",
    accentColor: "#6366F1",
    errorIconUrl: "https://cdn.example.com/error-icon.svg",
    warningIconUrl: null,
  }
}

Getting Started

Guides

Reference

FAQ & Changelog