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 #170

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

Context

Roadmap item: P2 / Frontend / Dark mode

Tailwind CSS is already configured in the project but no dark: variant classes are applied anywhere in the frontend. The dashboard lacks dark mode, which reduces usability in low-light environments and is expected by modern web users.

Work Required

  1. Enable darkMode: "class" (or "media") in tailwind.config.js if not already set
  2. Add a dark mode toggle button (sun/moon icon) to the navigation bar; store the user preference in localStorage
  3. Apply dark: variant classes to all major UI surfaces:
    • Background colors (page, cards, modals)
    • Text and border colors
    • Table rows and hover states
    • Form inputs and buttons
  4. Ensure charts (recharts) respect the dark background — update axis/grid colors conditionally
  5. Test toggle persists across page refreshes

Acceptance Criteria

  • Dark mode toggle is visible in the navigation bar on every page
  • All pages (Dashboard, Batch, Analytics, Admin) render legibly in dark mode
  • User preference is persisted to localStorage and restored on reload
  • No white flashes on initial load in dark mode
  • Passes tsc --noEmit with no new type errors

References

Roadmap: P2 -- Frontend -- No dark mode

## Context Roadmap item: P2 / Frontend / Dark mode Tailwind CSS is already configured in the project but no `dark:` variant classes are applied anywhere in the frontend. The dashboard lacks dark mode, which reduces usability in low-light environments and is expected by modern web users. ## Work Required 1. Enable `darkMode: "class"` (or `"media"`) in `tailwind.config.js` if not already set 2. Add a dark mode toggle button (sun/moon icon) to the navigation bar; store the user preference in `localStorage` 3. Apply `dark:` variant classes to all major UI surfaces: - Background colors (page, cards, modals) - Text and border colors - Table rows and hover states - Form inputs and buttons 4. Ensure charts (recharts) respect the dark background — update axis/grid colors conditionally 5. Test toggle persists across page refreshes ## Acceptance Criteria - [ ] Dark mode toggle is visible in the navigation bar on every page - [ ] All pages (Dashboard, Batch, Analytics, Admin) render legibly in dark mode - [ ] User preference is persisted to `localStorage` and restored on reload - [ ] No white flashes on initial load in dark mode - [ ] Passes `tsc --noEmit` with no new type errors ## References Roadmap: P2 -- Frontend -- No dark mode
AI-Manager added the P2agent-readymedium labels 2026-03-26 19:22:44 +00:00
AI-Manager commented 2026-03-27 01:55:09 +00:00
Author
Owner
Copy Link
Copy Source

Closing: already implemented on main. Tailwind dark variant is configured (darkMode: class in tailwind.config.js). Dark mode classes are used throughout Layout.tsx and other components.

Closing: already implemented on main. Tailwind dark variant is configured (darkMode: class in tailwind.config.js). Dark mode classes are used throughout Layout.tsx and other components.
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 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#170
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?