Themes

@nisli/ui is themed with CSS variables — a small, shadcn-compatible token layer you own in theme.css. Light and dark are the same tokens, re-declared under a .dark class. Toggle the theme (top-right) to watch every token below flip.

Color tokens

Semantic pairs — a surface and the foreground that sits on it.

background --background

card --card

popover --popover

primary --primary

secondary --secondary

muted --muted

accent --accent

destructive --destructive

Chart colors

Five categorical colors for data visualization.

chart-1

chart-2

chart-3

chart-4

chart-5

Radius

Every radius derives from a single --radius token.

Typography

The quick brown fox

Body copy in the foreground color — jumps over the lazy dog while staying perfectly legible on the background surface.

Muted secondary text for captions and hints.

Own your theme

Theming is editing variables. Override any token in your theme.css — no config, no build plugin, no rebuild of the components.

theme.css

:root {
  --primary: oklch(0.55 0.22 264);          /* your brand */
  --primary-foreground: oklch(0.98 0 0);
  --radius: 0.5rem;
}

.dark {
  --primary: oklch(0.7 0.19 264);
}