Theming
Override CSS custom properties to make the design system yours. Every token resolves automatically in light and dark mode.
How theming works
Changing the accent color
The most common customization. Define both light and dark values.
:root {
--accent: oklch(0.65 0.22 150);
}
.dark {
--accent: oklch(0.72 0.19 150);
}This changes links, focus rings, active states, and primary buttons across every component. Colors use the OKLCH color space for perceptual uniformity, so equal lightness steps look equally bright.
What can I theme?
Every token category can be overridden. See the design system pages for the full catalog.
CategoryTokens
ColorsAccent, destructive, warning, success, surfaces, text hierarchy
Typography12 sizes from 3xs to jumbo, font families, weights, tracking
SpacingBase unit, container width, max-width scale, breakpoints
ShadowsFour-level shadow scale from xs to lg
RadiiComponent tier system: form controls, buttons, cards, modals, indicators
Overriding multiple tokens
Override as many or as few tokens as you need.
:root {
/* Colors */
--accent: oklch(0.65 0.22 150);
--background: oklch(0.98 0.005 90);
--card: oklch(1 0 0);
/* Radius */
--radius: 0.75rem;
}
.dark {
--accent: oklch(0.72 0.19 150);
--background: oklch(0.15 0.005 90);
--card: oklch(0.18 0.005 90);
}All component tiers derive their radius from the base --radius token. Changing it once updates buttons, cards, dialogs, and inputs proportionally.