Notes on OKLCH for theming

OKLCH describes color as lightness, chroma, hue. Unlike HSL, its lightness is perceptually uniform, so nudging L actually looks like a consistent step.

The green scale here

--primary: oklch(0.52 0.12 150); /* light mode */
--primary: oklch(0.72 0.15 150); /* dark mode  */

Same hue (150, a forest green). In dark mode I raise lightness and chroma so it stays vivid against a near-black background.

The Tailwind v4 gotcha

Use @theme inline, not plain @theme, when your tokens reference other CSS variables:

@theme inline {
  --color-primary: var(--primary);
}

Plain @theme inlines the value at build time, so your .dark overrides never apply and dark mode silently does nothing. This one cost me an evening.

Rules of thumb

• Keep both themes in the same color space.
• Reference semantic tokens (bg-primary), never raw colors.
• Small L changes go a long way — trust the uniformity.