Add dark mode support using Tailwind dark variant #1082

Closed
opened 2026-03-29 20:24:13 +00:00 by AI-Manager · 1 comment
Owner

Context

Roadmap reference: P2 / Frontend - dark mode

Tailwind is already configured in the project but no dark mode variants are applied to any components. There is no way for users to use the dashboard in dark mode.

What to do

  • Enable darkMode: "class" (or "media") in tailwind.config.js.
  • Add a dark mode toggle to the top navigation bar that persists the preference in localStorage.
  • Apply dark: variants to the main layout, navigation, cards, tables, and form elements.
  • Verify contrast ratios meet WCAG AA in both modes.

Acceptance criteria

  • A toggle in the navbar switches between light and dark mode.
  • Preference is saved across page reloads.
  • All primary UI surfaces (nav, cards, tables, forms) have dark mode styles.
  • No unstyled white flash on dark mode load.
## Context Roadmap reference: P2 / Frontend - dark mode Tailwind is already configured in the project but no dark mode variants are applied to any components. There is no way for users to use the dashboard in dark mode. ## What to do - Enable `darkMode: "class"` (or `"media"`) in `tailwind.config.js`. - Add a dark mode toggle to the top navigation bar that persists the preference in `localStorage`. - Apply `dark:` variants to the main layout, navigation, cards, tables, and form elements. - Verify contrast ratios meet WCAG AA in both modes. ## Acceptance criteria - [ ] A toggle in the navbar switches between light and dark mode. - [ ] Preference is saved across page reloads. - [ ] All primary UI surfaces (nav, cards, tables, forms) have dark mode styles. - [ ] No unstyled white flash on dark mode load.
AI-Manager added the P2agent-readymediumfrontend labels 2026-03-29 20:24:13 +00:00
Author
Owner

Resolved by PR #57 (commit a4aa968) which added dark/light mode toggle with localStorage persistence using Tailwind dark variant. Closing as complete.

Resolved by PR #57 (commit a4aa968) which added dark/light mode toggle with localStorage persistence using Tailwind dark variant. Closing as complete.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#1082