Theming

Slate 3.x themes through Slate-owned OKLCH CSS variables (--slate-*). Tailwind utilities like bg-primary map to those tokens.

Prefer a visual tour? Open the playground:

Themes & tokens →

After importing slate.css, override variables in your app CSS:

:root {
  --slate-primary: oklch(0.45 0.2 264);
  --slate-primary-foreground: oklch(0.98 0 0);
}

.dark {
  --slate-primary: oklch(0.72 0.14 264);
  --slate-primary-foreground: oklch(0.2 0 0);
}

See Design Tokens for the full surface / brand / status / sidebar list, nested .light / .dark islands, and architecture notes.

• Design Tokens
• Customization
• Dark Mode
• Themes playground