Features

Theme React components with CSS variables

Change one variable and the whole interface follows. No provider, no config.

The short answer

oks-ui is themed entirely with CSS custom properties. Set --oks-* variables from your own stylesheet and every component follows, with no theme provider, no configuration object and no JavaScript running to style anything.

Try it

--oks-color-primary-500: #fe6601

Primary

Success

Neutral

Each swatch sets the whole --oks-color-primary-* ramp on the preview. These are the real components, re-tinted by CSS alone.

How a colour resolves

Every colour passes through three layers, and you can override any one of them: a palette shade, a semantic role that aliases it, and the component that reads the role.

--oks-button-tone
  → var(--oks-color-primary-500)      /* role alias */
    → var(--oks-palette-orange-500)   /* palette shade */
      → #fe6601                        /* the value */

Override a token

Set the custom property on :root from your own stylesheet, imported after oks-ui’s. That is the whole API.

brand.css

:root {
  --oks-color-primary-500: #4f46e5;
  --oks-radius-md: 10px;
  --oks-space-4: 18px;
}

Dark mode

Put data-theme="dark" on the <html> element. Each palette shade carries a light and a dark value, so nothing else needs to change.

Go further

Theming overview: the three token layers, and how to theme a single component.
Theming recipes: copy-paste overrides for common looks.
Dark mode: setting the theme without a flash on first paint.
Theme to your brand, including checking contrast on your own colours.

Questions

How do I change oks-ui's primary color?

Override the primary role's variables in your own CSS, for example --oks-color-primary-500. Different variants read different shades of a role, so for a fully consistent result override the whole 50 to 950 ramp, not only the 500 shade.

Does oks-ui need a ThemeProvider?

No. There is no theme provider and no configuration object. You import the stylesheet once and override CSS variables. The one exception is Toast, which has its own provider for its notification queue.

Does oks-ui support dark mode?

Yes. Set data-theme="dark" on the html element and every token switches to its dark value. Each palette shade has both a light and a dark value built in.

Keep exploring

Figures and claims on this page were last checked on 2026-09-24.