09 — Dark Mode
Dark Mode
Class-based dark mode using the neutral palette. Default theme is dark. Toggle with the theme button or press d.
Implementation
Strategy .dark class on <html> Tailwind class strategy
Persistence localStorage 'theme' Values: 'light' | 'dark' | 'system'
Default dark Matches developer preference
Token Mapping
| Token | Light | Dark |
|---|---|---|
| --cuitty-bg | #ffffff white | #0a0a0a neutral-950 |
| --cuitty-bg-subtle | #fafafa neutral-50 | #171717 neutral-900 |
| --cuitty-fg | #171717 neutral-900 | #fafafa neutral-50 |
| --cuitty-fg-muted | #737373 neutral-500 | #a3a3a3 neutral-400 |
| --cuitty-border | #e5e5e5 neutral-200 | #404040 neutral-700 |
| --cuitty-card-bg | #ffffff white | #171717 neutral-900 |
| --cuitty-primary | #2563eb blue-600 | #3b82f6 blue-500 |
| --cuitty-success | #16a34a green-600 | #22c55e green-500 |
| --cuitty-danger | #dc2626 red-600 | #ef4444 red-500 |
Dark Mode Guidelines
Do
- ✓ Use
neutral-*scale for dark backgrounds - ✓ Reduce shadow intensity in dark mode
- ✓ Lighten accent colors by one stop (600→500)
- ✓ Test contrast ratios in both modes
- ✓ Use
border-neutral-700/800for borders
Don't
- ✕ Mix
gray-*andneutral-*scales - ✕ Use identical shadows in both modes
- ✕ Use the same accent values in both modes
- ✕ Assume light-mode contrast ratios hold
- ✕ Use
border-gray-*in dark mode
Consistency Note
Known Inconsistency
The portal uses neutral-* for dark surfaces, while video/web/ uses gray-*.
The brand guide establishes neutral-* as canonical. The video web should be migrated.