@rokkit/unocss exports a single presetRokkit() function — a complete UnoCSS preset that wires up Rokkit's color token system, semantic utility shortcuts, icon integration, and dark mode in one call.

Setup

Add presetRokkit() to your UnoCSS config. The CLI (rokkit init) writes this automatically:

What presetRokkit adds

• Z-scale color tokens — semantic utility classes like bg-surface-z1, text-primary-z7, border-surface-z2 that automatically invert in dark mode
• Semantic color groups — surface, primary, secondary, accent, success, warning, danger, info
• Icon integration — loads configured icon collections for use with i-glyph:icon-name utility classes
• Dark mode — data-attribute-based dark mode (data-mode="dark") instead of CSS class
• Theme shortcuts — common component utility patterns

Configuration options

Using utility classes

Always use utility classes for color tokens — not inline CSS variables. See Theming Overview for the full utility class guide and z-depth token reference.

Related

• Theming Overview — Data attributes, z-scale tokens, utility class patterns
• Color System — Z-depth token values by mode
• CLI — rokkit init sets up this preset automatically