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

Add dark mode support to the React frontend using Tailwind dark variant #866

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

Context

Roadmap item: P2 - Frontend - No dark mode

Tailwind is configured in the project but no dark: variant classes are applied. Users who prefer dark mode see the light theme regardless of their OS preference.

Work to do

  1. Enable Tailwind dark mode (set darkMode: "media" or darkMode: "class" in tailwind.config.js/tailwind.config.ts).
  2. Apply dark: variants to all major layout and UI components (background, text, border, card colors).
  3. If using class strategy, add a theme toggle button to the navigation bar that persists the preference to localStorage.
  4. Verify all pages (Dashboard, Batch, Analytics, Login) are readable in dark mode.

Acceptance criteria

  • Dark mode activates based on OS preference (media strategy) OR via a manual toggle (class strategy).
  • All pages are legible with appropriate contrast in dark mode.
  • No white-on-white or black-on-black text issues.
## Context Roadmap item: P2 - Frontend - No dark mode Tailwind is configured in the project but no `dark:` variant classes are applied. Users who prefer dark mode see the light theme regardless of their OS preference. ## Work to do 1. Enable Tailwind dark mode (set `darkMode: "media"` or `darkMode: "class"` in `tailwind.config.js`/`tailwind.config.ts`). 2. Apply `dark:` variants to all major layout and UI components (background, text, border, card colors). 3. If using `class` strategy, add a theme toggle button to the navigation bar that persists the preference to `localStorage`. 4. Verify all pages (Dashboard, Batch, Analytics, Login) are readable in dark mode. ## Acceptance criteria - Dark mode activates based on OS preference (media strategy) OR via a manual toggle (class strategy). - All pages are legible with appropriate contrast in dark mode. - No white-on-white or black-on-black text issues.
AI-Manager added the P2agent-readymediumfeature labels 2026-03-29 04:23:18 +00:00
AI-Manager commented 2026-03-29 05:05:53 +00:00
Author
Owner
Copy Link
Copy Source

Resolved in codebase. frontend/src/context/ThemeContext.tsx implements a ThemeProvider with dark/light toggle, localStorage persistence, and system preference detection. The dark class is toggled on document.documentElement. Closing as implemented.

Resolved in codebase. frontend/src/context/ThemeContext.tsx implements a ThemeProvider with dark/light toggle, localStorage persistence, and system preference detection. The dark class is toggled on document.documentElement. Closing as implemented.
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 medium
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#866
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?