Theming

The srui token contract — every variable, what it drives, and how to override it.

srui components never hard-code colors, shadows or motion. Everything routes through CSS custom properties defined in @iammikz/srui/theme.css and overridden per preset. This page is the complete reference.

Color tokens

Set in theme.css under :root / .dark, aliased to Tailwind utilities via @theme inline:

Surface recipe tokens

Structure, not color — every preset overrides all five. The surface utility composes them; it never sets background-color, so it composes with bg-card / bg-popover / bg-primary in any stylesheet order.

Motion tokens

Radius tokens

--radius holds the preset's base value and is aliased to --radius-sm / --radius-md / --radius-lg / --radius-xl via @theme inline — the rounded-sm … rounded-xl utilities follow the active preset automatically.

Animation utilities

Registered in animations.css under @theme, usable as plain classes: animate-draw, animate-grow-y, animate-grow-x, animate-shimmer, animate-spin-slow, animate-count-fade, animate-scale-in, animate-fade-in. srui always pairs them with motion-safe: so reduced-motion users get the final state instead of a stuck animation.

Overriding a token

Redefine the variable after the @imports — the last definition wins for your whole app:

@import "tailwindcss";
@import "@iammikz/srui/theme.css";
@import "@iammikz/srui/presets/flat.css";

/* your brand */
:root {
  --primary: oklch(0.55 0.18 295);
  --radius: 0.75rem;
}
.dark {
  --primary: oklch(0.7 0.15 295);
}

To scope an override to one subtree, set the variable on any wrapper — custom properties inherit, so everything inside re-themes (this is exactly how <PresetGrid> on the Introduction page shows four presets at once).

Dark mode

UIProvider toggles a dark class on <html> based on its scheme state ("light" | "dark" | "system"), persisted under the srui-scheme localStorage key. Every token above has a .dark variant in each preset. Setting data-style on a wrapper (not <html>) re-themes just that subtree — but .dark always applies at the page level.

Token playground

Change --primary, --radius and --background and watch the preview update live: