Theme Customizer Deep Dive

How Sonna's theme system works under the hood.

Sonna uses a CSS variable-based theme system powered by Tailwind v4 and oklch color space. Here's how it all fits together.

CSS variables

Every color in the UI is a CSS variable — --primary, --background, --border, etc. The Customizer panel updates these variables in real time.

Unlike HSL, oklch provides perceptually uniform lightness, meaning colors stay visually consistent across different hues when you change themes.

Selected theme is stored in localStorage and applied on page load before the first paint, preventing flash of unstyled content.