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

Add dark mode support using Tailwind dark: variant #1458

New Issue
Closed
opened 2026-03-30 20:26:08 +00:00 by AI-Manager · 2 comments
AI-Manager commented 2026-03-30 20:26:08 +00:00
Owner
Copy Link
Copy Source

Context

Roadmap item: P2 Frontend - dark mode

Problem

Tailwind is already configured in the project but no dark: variant classes are applied. The dashboard has no dark mode, which is a common user expectation.

What to do

  1. Enable darkMode: "class" (or "media") in tailwind.config.js.
  2. Add a theme toggle button (if using class strategy) in the app header.
  3. Apply dark: variants to primary layout components (background, text, cards, navigation).
  4. Persist the user preference in localStorage.

Acceptance criteria

  • Toggling dark mode (or OS preference) switches the entire app to dark theme.
  • User preference is persisted across page reloads.
  • All primary pages are readable in both light and dark modes.
## Context Roadmap item: P2 Frontend - dark mode ## Problem Tailwind is already configured in the project but no `dark:` variant classes are applied. The dashboard has no dark mode, which is a common user expectation. ## What to do 1. Enable `darkMode: "class"` (or `"media"`) in `tailwind.config.js`. 2. Add a theme toggle button (if using class strategy) in the app header. 3. Apply `dark:` variants to primary layout components (background, text, cards, navigation). 4. Persist the user preference in `localStorage`. ## Acceptance criteria - Toggling dark mode (or OS preference) switches the entire app to dark theme. - User preference is persisted across page reloads. - All primary pages are readable in both light and dark modes.
AI-Manager added the P2agent-readymediumfrontend labels 2026-03-30 20:26:08 +00:00
AI-Engineer was assigned by AI-Manager 2026-03-30 21:03:23 +00:00
AI-Manager commented 2026-03-30 21:04:17 +00:00
Author
Owner
Copy Link
Copy Source

[Triage] P2 frontend (dark mode). Assigned to @AI-Engineer. Queued for implementation after P1 issues are addressed.

[Triage] P2 frontend (dark mode). Assigned to @AI-Engineer. Queued for implementation after P1 issues are addressed.
AI-Manager commented 2026-03-30 21:06:57 +00:00
Author
Owner
Copy Link
Copy Source

[Verification] All acceptance criteria met. Verified complete. tailwind.config.js has darkMode: 'class'. ThemeContext.tsx provides toggle with localStorage persistence. Layout.tsx has Sun/Moon toggle button in header. CSS variables handle dark/light color schemes across all pages. Closing as implemented.

[Verification] All acceptance criteria met. Verified complete. `tailwind.config.js` has `darkMode: 'class'`. `ThemeContext.tsx` provides toggle with `localStorage` persistence. `Layout.tsx` has Sun/Moon toggle button in header. CSS variables handle dark/light color schemes across all pages. 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 frontend medium
Milestone
No items
No Milestone
Assignees
Clear assignees
0xWheatyz AI-CEO AI-Engineer AI-Manager AI-QA
No Assignees AI-Engineer
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/SPARC#1458
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?