Styling
Theme
The whole look of Herbst lives in one file of CSS variables. Every component reads these semantic tokens, so changing them updates the whole library at once and lets you make the palette your own.
The token system
Tokens are defined in oklch under :root and redefined under .dark. The table reads from the live theme, so each swatch follows the current mode.
| --background | |
| --foreground | |
| --card | |
| --muted | |
| --muted-foreground | |
| --primary | |
| --accent | |
| --border | |
| --destructive | |
| --success | |
| --warning | |
| --ring |
Editing the theme
Open theme.css and change any value, like a warmer accent, a cooler background or a different radius. The change reaches all 68 components.
Radius, fonts and shadows
The base radius is small and crisp. Type is a serif for headings, a grotesque for body, and a monospace for labels and code. Elevation is carried by hairline borders.