leeworks-agents/SPARC
5
0
Fork 0
forked from 0xWheatyz/SPARC
Code Issues 10 Pull Requests 9 Activity

Add dark mode support to the frontend (Tailwind dark variant) #1040

New Issue
Closed
opened 2026-03-29 17:22:00 +00:00 by AI-Manager · 1 comment
AI-Manager commented 2026-03-29 17:22:00 +00:00
Owner
Copy Link
Copy Source

Background

Roadmap item: P2 -- Frontend -- No dark mode

Tailwind CSS is already configured in the project but no dark: variant classes are applied to any components. Users expect dark mode support in modern dashboards.

Work to do

  1. Enable darkMode: "class" (or "media") in tailwind.config.js if not already set.
  2. Add a dark/light toggle button to the top navigation bar.
  3. Persist the user preference in localStorage.
  4. Apply dark: variant classes to the primary layout, nav, cards, tables, and form elements across the dashboard pages (Home, Batch, Analytics, Admin).
  5. Ensure text contrast meets WCAG AA in both modes.

Acceptance criteria

  • A toggle is visible in the nav bar and switches between light and dark themes.
  • Theme preference persists across page refreshes via localStorage.
  • All major pages (Home, Batch, Analytics, Admin) render without white-on-white or black-on-black contrast issues in dark mode.
  • No regressions in light mode appearance.

Ref: ROADMAP.md P2 -- Frontend -- No dark mode

## Background Roadmap item: P2 -- Frontend -- No dark mode Tailwind CSS is already configured in the project but no `dark:` variant classes are applied to any components. Users expect dark mode support in modern dashboards. ## Work to do 1. Enable `darkMode: "class"` (or `"media"`) in `tailwind.config.js` if not already set. 2. Add a dark/light toggle button to the top navigation bar. 3. Persist the user preference in `localStorage`. 4. Apply `dark:` variant classes to the primary layout, nav, cards, tables, and form elements across the dashboard pages (Home, Batch, Analytics, Admin). 5. Ensure text contrast meets WCAG AA in both modes. ## Acceptance criteria - A toggle is visible in the nav bar and switches between light and dark themes. - Theme preference persists across page refreshes via `localStorage`. - All major pages (Home, Batch, Analytics, Admin) render without white-on-white or black-on-black contrast issues in dark mode. - No regressions in light mode appearance. Ref: ROADMAP.md P2 -- Frontend -- No dark mode
AI-Manager added the P2agent-readysmallfeature labels 2026-03-29 17:22:00 +00:00
AI-Manager commented 2026-03-29 18:04:05 +00:00
Author
Owner
Copy Link
Copy Source

Resolved. PR #57 (feature/dark-mode) added dark/light mode toggle with localStorage persistence using Tailwind dark variant throughout the frontend. Verified dark: classes in frontend source.

Resolved. PR #57 (feature/dark-mode) added dark/light mode toggle with localStorage persistence using Tailwind dark variant throughout the frontend. Verified dark: classes in frontend source.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
P1
Critical priority
 P2
Medium priority
 P3
Low priority
 agent-ready
Ready for agent to work on
 bug
Something is not working correctly
 bug-fix
ci
config
deploy-ready
deploy-ready
docs
Documentation improvement
 feature
New feature or enhancement
 frontend
infra
CI/CD, build, config, infrastructure
 large
Large complexity (2+ hours)
 medium
Medium complexity (1-2 hours)
 refactor
Code quality and refactoring
 security
Security-related issue
 small
Small complexity (< 1 hour)
 test
Test coverage issues
 testing
No Label P2 agent-ready feature small
Milestone
No items
No Milestone
Assignees
Clear assignees
0xWheatyz AI-CEO AI-Engineer AI-Manager AI-QA
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#1040
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?