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 themed element. Because every component reads from --cajon-* variables, everything under that element re-themes with no per-component change. Each viewer below scopes the theme to its own preview — switch the theme and only that viewer changes:

Controlling the theme in code

import { useTheme } from '@cajon-ui/react';

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 @cajon-ui/react.
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.