Rokkit separates layout CSS (structural) from theme CSS (visual). Components ship unstyled with data-* attribute hooks. Themes provide the visual layer — colors, radii, shadows — without touching structure.
Activating a theme
Add data-style to your <html> element and import the theme CSS. The
style attribute selects the visual personality:
Four built-in styles are available:
| Style | Personality |
|---|---|
rokkit | Rich gradients, glowing borders, and vibrant accents |
minimal | Clean, understated styling with subtle borders and soft backgrounds |
material | Material Design–inspired with elevation shadows and depth |
frosted | Liquid frosted glass with backdrop blur, specular borders, and translucent surfaces |
data-style can be set on any ancestor element, not just <html>.
Multiple themes can coexist on the same page — components inherit the nearest ancestor's data-style.
Data attributes
Four data attributes control the visual presentation:
| Attribute | Values | Purpose |
|---|---|---|
data-style | rokkit, minimal, material | Visual personality |
data-mode | light, dark | Light/dark mode |
data-palette | color variant name | Color skin override |
data-density | compact, default, comfortable | Spacing density (planned) |
UnoCSS utility classes
Use UnoCSS utility classes to apply theme colors — not inline CSS variables. The pattern is {bg|text|border}-{role}-z{n}, where role is a semantic color group and n is a z-depth token (1–10):
Z-depth tokens automatically invert between light and dark mode — no extra CSS needed. See Color System for the full z-depth reference.
Related
- Color System — z-depth tokens, palettes, dark mode
- Styling — theme CSS architecture, data-attribute hooks, custom themes
- UnoCSS —
presetRokkitsetup