Overview
The app has no dark mode. Add a full dark mode implementation using Tailwind's dark: variant, defaulting to the user's OS preference with a manual override toggle.
Acceptance Criteria
- Dark mode implemented via Tailwind
dark: class strategy (class mode in tailwind.config.ts)
- Detects OS preference via
prefers-color-scheme media query on first visit
- Sun/moon toggle button in the navbar saves preference to
localStorage as split-theme
localStorage preference takes precedence over OS preference on return visits- All UI components have
dark: variants: backgrounds, text, borders, shadows, cards, modals
- No flash of unstyled content — theme applied before first paint via inline script in
<head>
- Dark mode works correctly with the status badge colour system
- Transitions between modes use a 150 ms CSS transition on
background-color and color
Overview
The app has no dark mode. Add a full dark mode implementation using Tailwind's
dark:variant, defaulting to the user's OS preference with a manual override toggle.Acceptance Criteria
dark:class strategy (classmode intailwind.config.ts)prefers-color-schememedia query on first visitlocalStorageassplit-themelocalStoragepreference takes precedence over OS preference on return visitsdark:variants: backgrounds, text, borders, shadows, cards, modals<head>background-colorandcolor