# Theme Settings System — 2026-05-30 ## Editable Theme Values | Setting | Variable | Default | Storage Key | |---------|----------|---------|-------------| | Primary color | `--crm-primary` | `#16a34a` | `crm-primary-color` | | Dark/Light mode | `crm-theme-dark` / `crm-theme-light` class on `` | `dark` | `crm-theme` | Derived automatically from primary color (updated by JS, not stored separately): - `--crm-primary-hover` — 15% darkened version of primary - `--crm-primary-soft` — primary with 0.12 alpha (rgba) - `--crm-accent`, `--crm-accent-hover`, `--crm-accent-soft` — aliases kept for backward compat - `--wa`, `--wa-dark`, `--wa-soft` — dashboard chat workspace accent (auto-derived via CSS `var()`) ## Storage Method `localStorage` with keys: - `crm-primary-color` — hex color string (e.g. `#16a34a`) - `crm-theme` — `dark` or `light` Data is stored in the user's browser. Works on all admin pages. No database writes required. ## How Theme is Applied Globally ### On every page load (zero flash) An inline `