Theming
Hex UI ships with an HSL token palette that flips cleanly between light and dark. Every token is a CSS custom property you can override.
Design tokens
Colors are authored in HSL so that opacity modifiers and contrast tweaks stay predictable. Every token has a semantic pair — e.g. --color-primary / --color-primary-foreground.
css
@theme {
--color-background: hsl(0 0% 100%);
--color-foreground: hsl(240 10% 3.9%);
--color-card: hsl(0 0% 100%);
--color-card-foreground: hsl(240 10% 3.9%);
--color-primary: hsl(240 5.9% 10%);
--color-primary-foreground: hsl(0 0% 98%);
--color-muted: hsl(240 4.8% 95.9%);
--color-muted-foreground: hsl(240 3.8% 46.1%);
--color-accent: hsl(240 4.8% 95.9%);
--color-accent-foreground: hsl(240 5.9% 10%);
--color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(0 0% 98%);
--color-border: hsl(240 5.9% 90%);
--color-input: hsl(240 5.9% 90%);
--color-ring: hsl(240 5.9% 10%);
}Dark mode
Dark mode is driven by next-themes toggling a .dark class on <html>. Override tokens inside a .dark { … } block.
css
@custom-variant dark (&:is(.dark *));
.dark {
--color-background: hsl(240 10% 3.9%);
--color-foreground: hsl(0 0% 98%);
--color-muted: hsl(240 3.7% 15.9%);
--color-muted-foreground: hsl(240 5% 70%);
--color-border: hsl(240 3.7% 15.9%);
--color-ring: hsl(240 4.9% 83.9%);
}Custom palette
Brand the library by swapping the neutral palette for your own hues. Keep the token names — all components read these semantics.
css
/* Violet-tinted primary */
@theme {
--color-primary: hsl(258 90% 66%);
--color-primary-foreground: hsl(0 0% 100%);
--color-ring: hsl(258 90% 66%);
}
.dark {
--color-primary: hsl(258 90% 76%);
--color-primary-foreground: hsl(240 10% 3.9%);
}Typography scale
The docs site ships a tuned type scale — --text-2xs through --text-5xl with matching line heights. See globals.css for the full list.