Skip to main content

Theming

EasyUI styles its components using tailwind and custom CSS properties declared on :root, (such as radius, border widths and colors) all prefixed with --easyui-. Override these variables in your own CSS to retheme every component at once. No classNames, no EasyUIProvider config, nothing to rebuild.

For per-component, per-slot class overrides instead, see the global configuration guide.

Overriding variables​

Redeclare the variables you want to change on :root, in a stylesheet loaded after EasyUI's styles:

:root {
  --easyui-color-primary: #7c3aed;
  --easyui-color-primary-foreground: #ffffff;
}

Both declarations target :root with the same specificity, so the one loaded last wins. Every component reading --easyui-color-primary will use the new value.

Default values​

:root {
  --easyui-color-background: light-dark(#ffffff, #09090b);
  --easyui-color-foreground: light-dark(#18181b, #f4f4f5);
  --easyui-color-default: light-dark(#d7d7dd, #4e4e52);
  --easyui-color-default-foreground: light-dark(#18181b, #f4f4f5);
  --easyui-color-primary: #1c5eca;
  --easyui-color-primary-foreground: #ffffff;
  --easyui-color-secondary: #5e2bd4;
  --easyui-color-secondary-foreground: #ffffff;
  --easyui-color-success: #11ab3c;
  --easyui-color-success-foreground: #ffffff;
  --easyui-color-warning: #da820d;
  --easyui-color-warning-foreground: #ffffff;
  --easyui-color-error: #d61515;
  --easyui-color-error-foreground: #ffffff;
}

--easyui-color-{name}-dark defaults to color-mix(in srgb, var(--easyui-color-{name}) 70%, black), so it follows --easyui-color-{name} automatically. Override it directly only if the flat variant needs a different shade.

--easyui-color-background and --easyui-color-foreground are applied to body as background-color/color. They're independent from --easyui-color-default, which styles the default component variant, not the page itself.

Dark mode​

EasyUI ships a default dark mode using the native light-dark() CSS function.

:root {
  color-scheme: light dark; /* follow the OS by default */
}

[data-theme='dark'] {
  color-scheme: dark; /* explicit override */
}

[data-theme='light'] {
  color-scheme: light; /* explicit override */
}
  • Automatic: color-scheme: light dark on :root defers to the visitor's OS setting (prefers-color-scheme).
  • Explicit: setting data-theme="dark" (or "light") on any ancestor element (usually <html>) pins color-scheme to one side, overriding the OS preference. This is what a manual theme toggle should set.

Only these variables use light-dark():

  • --easyui-color-background
  • --easyui-color-foreground
  • --easyui-color-default
  • --easyui-color-default-foreground
  • the -dark shade of each accent color

The accent colors themselves stay the same in both modes, since they're already contrasted enough for both backgrounds.

To override the dark palette, redeclare the variable's light-dark() call on :root. there's no separate dark-mode block to keep in sync between the OS preference and an explicit theme setting.

:root {
  --easyui-color-default: light-dark(#f3f4f6, #1f2937);
  --easyui-color-default-foreground: light-dark(#111827, #e5e7eb);
}

Custom themes beyond light/dark​

You may want to add themes beyond light and dark. To do this, redeclare the variables on your own selector. It overrides any other light or dark value. Note that you can't use light-dark() here, since it only picks between light and dark.

[data-theme='custom-theme'] {
  --easyui-color-background: #f4ecd8;
  --easyui-color-foreground: #5b4636;
  --easyui-color-default: #e3d5b8;
  --easyui-color-default-foreground: #5b4636;
}

Focus ring​

The single color used to signal focus across the whole library. Defaults to --easyui-color-primary.

:root {
  --easyui-color-focus-ring: var(--easyui-color-primary);
}

It applies to:

  • the outline of interactive elements, such as Button, the close buttons of Alert and Modal, and every field in the flat variant;
  • the border color taken at focus by Input, InputNumber, Autocomplete and Selector in the bordered, faded and underlined variants — that color no longer follows the color prop of the field.

Radius​

Used by the radius prop's sm / md / lg values (none and full always map to rounded-none / rounded-full):

:root {
  --easyui-radius-sm: 8px;
  --easyui-radius-md: 12px;
  --easyui-radius-lg: 14px;
}

Border width​

--easyui-border-width-md is used by the outlined variant's border.

:root {
  --easyui-border-width-sm: 1px;
  --easyui-border-width-md: 2px;
  --easyui-border-width-lg: 3px;
}

Outline​

Thickness and offset of the focus-visible outline drawn on interactive elements. Its color comes from --easyui-color-focus-ring.

:root {
  --easyui-outline-width: 2px;
  --easyui-outline-offset: 2px;
}

Scoping overrides​

These are plain CSS custom properties, so they cascade like any other. Scope variables on a more specific selector instead of :root:

.compact-section {
  --easyui-radius-sm: 4px;
  --easyui-radius-md: 6px;
}