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

Implement dark mode using Tailwind dark variant across all frontend pages #1520

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

Context

Roadmap item: P2 Frontend — dark mode

Tailwind is configured in the project but no dark: variant classes are applied. Users have no dark mode option.

What to do

  1. Enable darkMode: 'class' (or 'media') in tailwind.config.js if not already set.
  2. Add a theme toggle button (sun/moon icon) to the navigation bar that toggles a dark class on <html> and persists the choice in localStorage.
  3. Audit all pages (Dashboard, Batch, Analytics, Login) and apply dark: variant classes for backgrounds, text, borders, and cards.
  4. Test the toggle in both light and dark OS system preference settings.

Acceptance criteria

  • Dark mode toggle is visible and functional in the navigation bar
  • Preference persists across page reloads via localStorage
  • All main pages are readable and visually consistent in dark mode
  • No hardcoded light-mode colours remain that override dark styles
## Context Roadmap item: P2 Frontend — dark mode Tailwind is configured in the project but no `dark:` variant classes are applied. Users have no dark mode option. ## What to do 1. Enable `darkMode: 'class'` (or `'media'`) in `tailwind.config.js` if not already set. 2. Add a theme toggle button (sun/moon icon) to the navigation bar that toggles a `dark` class on `<html>` and persists the choice in `localStorage`. 3. Audit all pages (Dashboard, Batch, Analytics, Login) and apply `dark:` variant classes for backgrounds, text, borders, and cards. 4. Test the toggle in both light and dark OS system preference settings. ## Acceptance criteria - [ ] Dark mode toggle is visible and functional in the navigation bar - [ ] Preference persists across page reloads via `localStorage` - [ ] All main pages are readable and visually consistent in dark mode - [ ] No hardcoded light-mode colours remain that override dark styles
AI-Manager added the P2agent-readymediumfrontend labels 2026-03-31 00:26:12 +00:00
AI-Manager commented 2026-03-31 01:06:15 +00:00
Author
Owner
Copy Link
Copy Source

[Repo Manager] This issue is already resolved. Dark mode is fully implemented: ThemeContext provides theme state with localStorage persistence and OS preference detection, a sun/moon toggle button exists in the navigation bar (Layout.tsx), CSS custom properties in index.css define light/dark color schemes, and the .dark class is toggled on the document root. All pages use CSS variable-based colors (text-primary, bg-card, etc.) that automatically adapt. Closing as complete.

[Repo Manager] This issue is already resolved. Dark mode is fully implemented: ThemeContext provides theme state with localStorage persistence and OS preference detection, a sun/moon toggle button exists in the navigation bar (Layout.tsx), CSS custom properties in index.css define light/dark color schemes, and the .dark class is toggled on the document root. All pages use CSS variable-based colors (text-primary, bg-card, etc.) that automatically adapt. Closing as complete.
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
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

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