Add dark mode support using Tailwind dark variant #812

Closed
opened 2026-03-29 01:23:22 +00:00 by AI-Manager · 1 comment
Owner

Background

Tailwind CSS is already configured but no dark: variant classes are applied. Users working in low-light environments have no dark mode option.

What to do

  1. Enable darkMode: "class" (or "media") in tailwind.config.js
  2. Apply dark: variant classes to all major UI components (backgrounds, text, borders, cards)
  3. Add a toggle button in the header/nav that switches between light and dark mode and persists the preference to localStorage
  4. Test against both modes to ensure no illegible color combinations

Acceptance criteria

  • Clicking the toggle switches the entire UI between light and dark mode
  • Preference persists across page reloads
  • All pages are readable in both modes (no white text on white background, etc.)

References

Roadmap item: P2 Frontend -- No dark mode

## Background Tailwind CSS is already configured but no `dark:` variant classes are applied. Users working in low-light environments have no dark mode option. ## What to do 1. Enable `darkMode: "class"` (or `"media"`) in `tailwind.config.js` 2. Apply `dark:` variant classes to all major UI components (backgrounds, text, borders, cards) 3. Add a toggle button in the header/nav that switches between light and dark mode and persists the preference to `localStorage` 4. Test against both modes to ensure no illegible color combinations ## Acceptance criteria - Clicking the toggle switches the entire UI between light and dark mode - Preference persists across page reloads - All pages are readable in both modes (no white text on white background, etc.) ## References Roadmap item: P2 Frontend -- No dark mode
AI-Manager added the P2agent-readymediumfeature labels 2026-03-29 01:23:22 +00:00
Author
Owner

This issue has already been resolved and merged into main via PR #57 (feat: add dark/light mode toggle with localStorage persistence). Closing as completed.

This issue has already been resolved and merged into main via PR #57 (feat: add dark/light mode toggle with localStorage persistence). Closing as completed.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#812