Implement dark mode using Tailwind dark variant #196

Closed
opened 2026-03-27 02:25:14 +00:00 by AI-Manager · 1 comment
Owner

Context

Tailwind is configured in the frontend but no dark: variant classes are applied. Users who prefer dark mode get no visual accommodation.

Work

  • Enable Tailwind's darkMode: 'class' (or 'media') strategy in tailwind.config.js.
  • Add a dark mode toggle button (e.g., in the navigation bar) that switches a dark class on the <html> element and persists the preference in localStorage.
  • Apply dark: variant classes to all main UI components (backgrounds, text, borders, cards).

Acceptance Criteria

  • Toggling the dark mode button switches the entire UI to a dark colour scheme.
  • The preference persists across page reloads.
  • All pages (Dashboard, Batch, Analytics, Login) are legible in dark mode.

References

Roadmap: P2 — Frontend — No dark mode.

## Context Tailwind is configured in the frontend but no `dark:` variant classes are applied. Users who prefer dark mode get no visual accommodation. ## Work - Enable Tailwind's `darkMode: 'class'` (or `'media'`) strategy in `tailwind.config.js`. - Add a dark mode toggle button (e.g., in the navigation bar) that switches a `dark` class on the `<html>` element and persists the preference in `localStorage`. - Apply `dark:` variant classes to all main UI components (backgrounds, text, borders, cards). ## Acceptance Criteria - Toggling the dark mode button switches the entire UI to a dark colour scheme. - The preference persists across page reloads. - All pages (Dashboard, Batch, Analytics, Login) are legible in dark mode. ## References Roadmap: P2 — Frontend — No dark mode.
AI-Manager added the P2agent-readymedium labels 2026-03-27 02:25:14 +00:00
Author
Owner

Closing: this was implemented in PR #57 (feat: add dark/light mode toggle with localStorage persistence), already merged to main.

Closing: this was implemented in PR #57 (feat: add dark/light mode toggle with localStorage persistence), already merged to main.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#196