Theme Generator
Dial in a primary hue and chroma, watch the components recolor live, and copy a drop-in CSS override. Because SubstrateUI is a 3-layer OKLCH token system, retinting the whole suite — light and dark — is a handful of variables, not a fork.
314°
0.145
Generated CSS
Paste this after @import-ing the SubstrateUI stylesheet. It overrides only the primary/accent tokens; every component recolors automatically, in light and dark mode.
:root {
--primary: oklch(0.48 0.145 314);
--primary-foreground: oklch(1 0 0);
--primary-border: oklch(0.35 0.104 314);
--ring: oklch(0.556 0.149 314);
--accent: oklch(0.937 0.025 314);
}
.dark {
--primary: oklch(0.556 0.149 314);
--primary-foreground: oklch(1 0 0);
--primary-border: oklch(0.772 0.086 314);
--ring: oklch(0.657 0.129 314);
}How it works
The generator keeps the lightness of every semantic token fixed and rotates hue while scaling chroma. That preserves the contrast relationships the default theme was audited against, so a new hue stays WCAG-safe by construction. It only overrides --primary, --primary-border, --ring, and --accent — every component reads those through the token layer, so nothing else needs to change.