Get Started
Theming
The entire system follows one variable. Override --brand (and its dark value) in your globals.css — rings, the primary chart line, active states, and status-success all follow.
Re-skin the brand
:root { --brand: oklch(0.55 0.20 25); } /* e.g. a red-orange */
.dark { --brand: oklch(0.65 0.20 25); }Pick a slightly lighter, more chromatic value for dark mode so the accent keeps the same perceived punch against the warm dark surface.
What follows the accent
--ring— focus rings on every interactive element.--chart-1— the primary chart series and sparklines.--success— positive status, deltas, and healthy gauges.- Active nav, selected segments, and brand-tinted surfaces across the system.
Everything else stays calm ink and gray, so a single accent change re-skins the whole surface without touching component code.