Theming
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.
Overview
Add a data attribute to <html> and import the theme CSS:
<html data-palette="rokkit" data-mode="dark">Color System
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:
Styling
Rokkit separates layout CSS from visual theme CSS using data-* attribute selectors. This
clean architecture makes it easy to customize, override, or build entirely new themes.
Theme Architecture
Every Rokkit component uses two layers of CSS:
- Base (layout) — Positioning, sizing, spacing. Rarely needs changing.
- Theme (visual) — Colors, borders, shadows, transitions. Swap or override freely.
Data-Attribute Hooks
Components expose styling hooks via data-* attributes instead of class names. This avoids
naming collisions and makes selectors self-documenting:
Common State Attributes
Components share a consistent set of state attributes across all components:
| Attribute | When Present | Components |
|---|---|---|
data-selected | Item is selected | List, Select, Tabs, Toggle |
data-focused | Item has keyboard focus | All navigable |
data-disabled | Item is disabled | All |
data-expanded | Group is expanded | List, Tree, Select |
data-open | Dropdown is open | Select, Menu |
Building a Custom Theme
Create your own theme by writing CSS that targets data attributes. Start by copying the Rokkit theme and modifying colors, borders, and transitions:
Skins
Rokkit provides pre-built skin sets that bundle color palettes and style variations. Apply a skin by adding a class to your root element:
Component-Level Styling
Every component accepts a class prop for adding custom CSS classes. Use this for one-off
adjustments without creating new theme rules:
Density
Coming soon.
Whitelabeling
Coming soon.