Theming

The theme is a set of CSS custom properties in OKLCH. Components reference the tokens, so restyling is editing variables, and dark mode is one class.

For live six-axis customization, scoped themes, and CSS export, see Theme engine.

Tokens

Tokens hold complete color values (not channel triples), so they port 1:1 and stay editor-compatible. A .dark class on a parent swaps the palette.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  /* ... */
}

Tailwind v4

A @theme inline block wires --color-* to the tokens so utilities like bg-primary and text-muted-foreground resolve with zero extra config, including opacity modifiers like bg-primary/90. Build with the Tailwind v4 standalone CLI, no Node required.

Dark mode

Toggle the dark class on <html> (this site ships dark by default). No component changes; they read the tokens.