#Theme
| Mode | Support |
|---|---|
| Light | Yes |
| Dark | Yes |
| System | Yes (default). Follows prefers-color-scheme live |
Implementation: next-themes (installed) with the class strategy, and shadcn CSS variables in app/globals.css for both modes. Confirmed scaffold
#Persistence
- Stored per device (
localStoragethrough next-themes). A cookie copy lets server-rendered pages avoid a flash Assumption. - Saving the theme to the user profile is optional. No V8 field exists Open question.
- No flash on load: the theme script runs before paint (next-themes default).
#Components
| Element | Rule |
|---|---|
| Charts | Colours from CSS variables (--chart-1…5), axis/grid from --muted-foreground/--border. Tooltips use the popover tokens. Never hard-coded hex |
| Tables | Row hover and selected rows use token colours. Zebra rows optional. Sticky header background = --background |
| Forms | Inputs, focus ring (--ring), error text (--destructive) readable in both modes (WCAG AA 4.5:1) |
| Modals / sheets | Overlay darker in dark mode. Popover tokens |
| Empty states | Illustrations/icons in currentColor, so they follow the theme |
| Error states | --destructive tokens, never a raw red |
| Status badges | One semantic token set (success/warning/danger/info/muted) mapped per mode |
| Code / logs | Monospace panel with its own tokens, readable in both modes |
#Testing
Every page is checked in light and dark (Testing). Contrast is checked automatically with axe in both modes.