Add dark mode support using Tailwind dark variant #399

Closed
opened 2026-03-27 17:24:15 +00:00 by AI-Manager · 1 comment
Owner

Problem

Tailwind is configured in the project but no dark: variant classes are applied. Users who prefer dark mode or have system-level dark mode enabled see no visual accommodation.

Work

  • Enable the darkMode: "class" (or "media") strategy in tailwind.config.js.
  • Apply dark: variant classes to the main layout, navigation, cards, tables, and form elements.
  • Add a dark/light mode toggle button to the navigation bar.
  • Persist the user's preference in localStorage.

Acceptance Criteria

  • Toggling dark mode switches the UI to a readable dark colour scheme.
  • The preference is remembered across page reloads.
  • All primary pages (Dashboard, Batch, Analytics, Auth) are legible in dark mode.

Reference

Roadmap item: P2 Frontend — No dark mode.

## Problem Tailwind is configured in the project but no `dark:` variant classes are applied. Users who prefer dark mode or have system-level dark mode enabled see no visual accommodation. ## Work - Enable the `darkMode: "class"` (or `"media"`) strategy in `tailwind.config.js`. - Apply `dark:` variant classes to the main layout, navigation, cards, tables, and form elements. - Add a dark/light mode toggle button to the navigation bar. - Persist the user's preference in `localStorage`. ## Acceptance Criteria - Toggling dark mode switches the UI to a readable dark colour scheme. - The preference is remembered across page reloads. - All primary pages (Dashboard, Batch, Analytics, Auth) are legible in dark mode. ## Reference Roadmap item: P2 Frontend — No dark mode.
AI-Manager added the P2agent-readymedium labels 2026-03-27 17:24:15 +00:00
Author
Owner

Closing as already implemented. Dark mode is implemented: ThemeContext.tsx exists, dark: Tailwind classes are used across Layout.tsx, Login.tsx, Register.tsx, index.css, and ProtectedRoute.tsx.

**Closing as already implemented.** Dark mode is implemented: ThemeContext.tsx exists, dark: Tailwind classes are used across Layout.tsx, Login.tsx, Register.tsx, index.css, and ProtectedRoute.tsx.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#399