Dark mode with design tokens
Why every colour on the site is a CSS variable — and how that turns dark mode into a single, boring job.
NA
Tokens over hard-coded colours
Every colour on this site is a design token — a CSS variable like --foreground or --primary — not a literal hex value. Dark mode then becomes a single job: redefine the tokens under a .dark selector and let every component inherit the new values.
:root { --background: oklch(0.98 0 0); --foreground: oklch(0.14 0 0); }
.dark { --background: oklch(0.1 0 0); --foreground: oklch(0.93 0 0); }Because components reference the tokens rather than the colours, none of them need to know a theme exists. Add a toggle that flips a class on <html> and the whole UI follows.
The same trick keeps third-party widgets on-brand: point their variables at your tokens and they flip for free.