Themes and dark mode

Your UI uses one set of names. The theme decides which shade each name points to, so dark mode needs no extra CSS.

How themes work

Every semantic token has a light value and a dark value. --bg-surface points to white in light mode and to a dark neutral in dark mode. Your components only use --bg-surface, so they work in both without a second set of styles.

The hosted CSS and the CSS export are laid out like this (shortened):

:root {
  /* Semantic — Light */
  --bg-surface: var(--color-base-white);
  --text-primary: var(--color-neutral-900);
}

[data-theme="dark"] {
  --bg-surface: var(--color-neutral-900);
  --text-primary: var(--color-neutral-50);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-surface: var(--color-neutral-900);
    --text-primary: var(--color-neutral-50);
  }
}

Switch with one attribute

• <html data-theme="dark"> shows the dark theme.
• <html data-theme="light"> keeps the light theme, even on a device set to dark.
• No data-theme at all follows the visitor’s device setting.

To switch from a button, set the attribute in JavaScript:

document.documentElement.dataset.theme = 'dark';

Tailwind’s dark: variant

The Tailwind v4 theme from UIX ties the dark: variant to the same attribute, or to a dark class:

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *, .dark, .dark *));

You rarely need dark: for colors, since bg-surface and text-fg-primary already switch. Use it for things that aren’t tokens, like swapping an image.

Light, dark or both

At /generate, the question “Light, dark or both?” sets where you start: light and dark, light only, or dark first. Every color gets a light and a dark value either way, and both are checked for contrast.

Free and Pro

• Hosted links, the CLI, the shadcn registry and the MCP server give light and dark on every plan.
• In the Figma plugin, Free has the light theme. Pro adds dark, high contrast and multi-brand themes, plus the Material 3, shadcn and UIX Extended token presets.

Plans and prices are on Pricing.