Rokkit uses semantic z-depth color tokens that automatically adapt between light and dark modes. The system provides consistent visual hierarchy without manual color management.
Z-Depth Tokens
Colors use a numbered z-depth system (z1 through z10) where lower
numbers are subtle and higher numbers are prominent:
| Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
z1 | 50 | 950 | Subtle backgrounds |
z2 | 100 | 900 | Borders, dividers |
z3 | 200 | 800 | Hover backgrounds |
z4 | 300 | 700 | Active states |
z5 | 400 | 600 | Muted text |
z6 | 500 | 500 | Body text |
z7 | 600 | 400 | Emphasis text |
z8 | 700 | 300 | Headings |
z9 | 800 | 200 | High contrast |
z10 | 900 | 100 | Maximum contrast |
Color Palettes
Rokkit includes these semantic color groups:
surface— Neutral grays for backgrounds, text, and bordersprimary— Brand color for primary actions and focus statessecondary— Accent color for highlights and active indicatorsaccent— Additional emphasis colorsuccess,warning,danger,info— Status colors
Usage
Use z-depth tokens as UnoCSS utility classes. The token resolves to the correct shade for the current mode (light or dark):
Customizing the Palette
Override the default colors by passing a custom palette to themeRules() in your UnoCSS config:
Dark Mode
Z-depth tokens automatically invert in dark mode. Set data-mode="dark" on your root
element, and all z1-z10 values flip to their dark equivalents. No additional CSS needed.
Use the ThemeSwitcherToggle component from @rokkit/app to let users toggle
between light, dark, and system modes: