Theming

The system ships three brand themes, each with a dark variant:

Switching a theme sets data-theme-id (and data-theme="dark") on the document element. Because every component reads from --cdz-* variables, the whole UI re-themes with no per-component change. Try it — this control re-themes every example on this page:

Controlling the theme in code

import { useTheme } from '@cdz/ui';

function ThemeMenu() {
  const { theme, setTheme, dark, toggleDark, themes } = useTheme();
  // theme  -> 'harmonica' | 'verdant' | 'ember'
  // dark   -> boolean
  // setTheme('verdant'); toggleDark();
}

The provider persists the selection to localStorage, so a hard reload keeps the chosen theme and mode. Disable persistence with <ThemeProvider persist={false}>.

Adding a theme

1. Add a styles/theme-<name>.css file overriding the switchable tokens (brand scale, primary, gradients, glows, fonts) under html[data-theme-id="<name>"].
2. Add an entry to the THEMES registry in @cdz/ui.
3. Add a @import for it in styles.css.

Structural tokens (gray, text, spacing, radii, shadows) stay constant across themes — only the brand-expressive tokens change.