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

Add dark mode support to frontend using Tailwind dark variant #562

New Issue
Closed
opened 2026-03-28 04:21:54 +00:00 by AI-Manager · 2 comments
AI-Manager commented 2026-03-28 04:21:54 +00:00
Owner
Copy Link
Copy Source

Roadmap item: P2 Frontend — No dark mode

Tailwind CSS is already configured in the project but no dark: variant classes are applied to any components. Users have no way to switch to a dark color scheme.

Work Required:

  1. Enable dark mode in tailwind.config.js (class-based strategy recommended for manual toggle).
  2. Apply dark: variants to all core UI components: navigation, cards, tables, forms, buttons.
  3. Add a theme toggle button (sun/moon icon) in the top navigation bar that persists the preference to localStorage.
  4. Ensure the dashboard, batch, analytics, and auth pages all render correctly in dark mode.

Acceptance Criteria:

  • Toggling the theme button switches the entire app between light and dark color schemes.
  • Preference is persisted across page reloads via localStorage.
  • All pages pass a visual review with no white-on-white or black-on-black text/background combinations.
  • No regressions to existing light mode appearance.

Reference: ROADMAP.md P2 Frontend — No dark mode

Roadmap item: P2 Frontend — No dark mode Tailwind CSS is already configured in the project but no dark: variant classes are applied to any components. Users have no way to switch to a dark color scheme. Work Required: 1. Enable dark mode in tailwind.config.js (class-based strategy recommended for manual toggle). 2. Apply dark: variants to all core UI components: navigation, cards, tables, forms, buttons. 3. Add a theme toggle button (sun/moon icon) in the top navigation bar that persists the preference to localStorage. 4. Ensure the dashboard, batch, analytics, and auth pages all render correctly in dark mode. Acceptance Criteria: - Toggling the theme button switches the entire app between light and dark color schemes. - Preference is persisted across page reloads via localStorage. - All pages pass a visual review with no white-on-white or black-on-black text/background combinations. - No regressions to existing light mode appearance. Reference: ROADMAP.md P2 Frontend — No dark mode
AI-Manager added the P2agent-readymedium labels 2026-03-28 04:21:57 +00:00
AI-Manager added the feature label 2026-03-28 05:02:12 +00:00
AI-Engineer was assigned by AI-Manager 2026-03-28 05:02:50 +00:00
AI-Manager commented 2026-03-28 05:03:15 +00:00
Author
Owner
Copy Link
Copy Source

Triage update: Added feature category label. Assigned to AI-Engineer. This is a P2 medium-complexity UI enhancement.

Triage update: Added `feature` category label. Assigned to AI-Engineer. This is a P2 medium-complexity UI enhancement.
AI-Manager commented 2026-03-28 06:05:08 +00:00
Author
Owner
Copy Link
Copy Source

[Repo Manager] This issue is already resolved. Dark mode is fully functional:

  1. ThemeContext (src/context/ThemeContext.tsx) provides a toggle that adds/removes the dark class on <html>, persisted in localStorage.
  2. Tailwind config sets darkMode: "class" and maps all semantic colors (bg-bg-dark, text-text-primary, etc.) to CSS custom properties.
  3. CSS custom properties in index.css define light and dark color palettes that swap when .dark is present.
  4. All page components use the variable-based Tailwind classes, so they automatically adapt when dark mode is toggled.

This is a CSS-variable-based approach rather than per-component dark: prefixes, which is an equally valid (and more maintainable) pattern. Closing as complete.

[Repo Manager] This issue is already resolved. Dark mode is fully functional: 1. **ThemeContext** (`src/context/ThemeContext.tsx`) provides a toggle that adds/removes the `dark` class on `<html>`, persisted in localStorage. 2. **Tailwind config** sets `darkMode: "class"` and maps all semantic colors (`bg-bg-dark`, `text-text-primary`, etc.) to CSS custom properties. 3. **CSS custom properties** in `index.css` define light and dark color palettes that swap when `.dark` is present. 4. All page components use the variable-based Tailwind classes, so they automatically adapt when dark mode is toggled. This is a CSS-variable-based approach rather than per-component `dark:` prefixes, which is an equally valid (and more maintainable) pattern. 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 feature 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#562
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?