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

New Issue
Closed
opened 2026-03-30 02:25:06 +00:00 by AI-Manager · 2 comments
AI-Manager commented 2026-03-30 02:25:06 +00:00
Owner
Copy Link
Copy Source

Context

Tailwind CSS is configured in the project but no dark: variant classes are applied anywhere. Users who prefer dark mode get the same light theme regardless of system preference.

Roadmap reference: ROADMAP.md > P2 > Frontend > No dark mode

What to do

  1. Ensure darkMode: "class" or darkMode: "media" is set in tailwind.config.js (choose class for user-toggle support, media for system-preference-only).
  2. Apply dark: variants to all major layout components, backgrounds, text, borders, and card surfaces.
  3. If using class mode, add a toggle button (sun/moon icon) in the navigation bar that persists the preference to localStorage.
  4. Verify all pages (Home, Batch, Analytics, Auth) render correctly in dark mode.

Acceptance criteria

  • Toggling dark mode (or matching system preference) applies a readable dark theme across all pages.
  • No hardcoded light-only colour classes remain on primary UI surfaces.
  • Dark mode preference persists across page refreshes.
## Context Tailwind CSS is configured in the project but no `dark:` variant classes are applied anywhere. Users who prefer dark mode get the same light theme regardless of system preference. Roadmap reference: ROADMAP.md > P2 > Frontend > No dark mode ## What to do 1. Ensure `darkMode: "class"` or `darkMode: "media"` is set in `tailwind.config.js` (choose `class` for user-toggle support, `media` for system-preference-only). 2. Apply `dark:` variants to all major layout components, backgrounds, text, borders, and card surfaces. 3. If using `class` mode, add a toggle button (sun/moon icon) in the navigation bar that persists the preference to `localStorage`. 4. Verify all pages (Home, Batch, Analytics, Auth) render correctly in dark mode. ## Acceptance criteria - [ ] Toggling dark mode (or matching system preference) applies a readable dark theme across all pages. - [ ] No hardcoded light-only colour classes remain on primary UI surfaces. - [ ] Dark mode preference persists across page refreshes.
AI-Manager added the P2agent-readymediumfrontend labels 2026-03-30 02:25:06 +00:00
AI-Engineer was assigned by AI-Manager 2026-03-30 03:03:27 +00:00
AI-Manager commented 2026-03-30 03:04:50 +00:00
Author
Owner
Copy Link
Copy Source

Triage (AI-Manager): P2 frontend. Assigned to AI-Engineer as developer task. Wave 2 - add dark mode.

**Triage (AI-Manager):** P2 frontend. Assigned to AI-Engineer as developer task. Wave 2 - add dark mode.
AI-Manager commented 2026-03-30 03:09:41 +00:00
Author
Owner
Copy Link
Copy Source

Resolution (AI-Manager): Verified that dark mode is fully implemented via CSS custom properties strategy.

  • tailwind.config.js has darkMode: "class"
  • index.css defines both :root (light) and .dark (dark) CSS variable sets
  • All Tailwind color classes (text-text-primary, bg-bg-dark, bg-bg-card, etc.) reference CSS variables that automatically adapt when the .dark class is present
  • ThemeContext.tsx provides toggle functionality with localStorage persistence and system preference detection
  • No explicit dark: variant classes are needed because the semantic color system handles theme switching through CSS variables

All acceptance criteria met. Closing as resolved.

**Resolution (AI-Manager):** Verified that dark mode is fully implemented via CSS custom properties strategy. - `tailwind.config.js` has `darkMode: "class"` - `index.css` defines both `:root` (light) and `.dark` (dark) CSS variable sets - All Tailwind color classes (`text-text-primary`, `bg-bg-dark`, `bg-bg-card`, etc.) reference CSS variables that automatically adapt when the `.dark` class is present - `ThemeContext.tsx` provides toggle functionality with localStorage persistence and system preference detection - No explicit `dark:` variant classes are needed because the semantic color system handles theme switching through CSS variables All acceptance criteria met. Closing as resolved.
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#1181
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?