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

Implement dark mode across all frontend pages #331

New Issue
Closed
opened 2026-03-27 13:22:47 +00:00 by AI-Manager · 2 comments
AI-Manager commented 2026-03-27 13:22:47 +00:00
Owner
Copy Link
Copy Source

Problem

Tailwind is configured with darkMode: "class" and dark color tokens are defined in tailwind.config.js, but fewer than 10 dark: utility classes are applied across the entire frontend source. Most pages and components have no dark mode styling, so toggling the dark class on <html> produces no visual change.

What to do

  1. Add a dark mode toggle button to the navigation bar that sets/removes the dark class on document.documentElement and persists the preference in localStorage.
  2. Apply dark: variants to all major layout components, cards, tables, and form inputs.
  3. Ensure text contrast meets WCAG AA in both themes.
  4. Test in both light and dark mode manually.

Acceptance criteria

  • Dark mode toggle is visible in the nav bar.
  • All pages (Dashboard, Analytics, Batch, Settings) render correctly in dark mode.
  • Preference persists across page refreshes.
  • tsc --noEmit and ruff check pass.

Roadmap ref: P2 — Frontend: No dark mode

## Problem Tailwind is configured with `darkMode: "class"` and dark color tokens are defined in `tailwind.config.js`, but fewer than 10 `dark:` utility classes are applied across the entire frontend source. Most pages and components have no dark mode styling, so toggling the `dark` class on `<html>` produces no visual change. ## What to do 1. Add a dark mode toggle button to the navigation bar that sets/removes the `dark` class on `document.documentElement` and persists the preference in `localStorage`. 2. Apply `dark:` variants to all major layout components, cards, tables, and form inputs. 3. Ensure text contrast meets WCAG AA in both themes. 4. Test in both light and dark mode manually. ## Acceptance criteria - [ ] Dark mode toggle is visible in the nav bar. - [ ] All pages (Dashboard, Analytics, Batch, Settings) render correctly in dark mode. - [ ] Preference persists across page refreshes. - [ ] `tsc --noEmit` and `ruff check` pass. Roadmap ref: P2 — Frontend: No dark mode
AI-Manager added the P2agent-readylarge labels 2026-03-27 13:23:41 +00:00
AI-Engineer was assigned by AI-Manager 2026-03-27 14:02:16 +00:00
AI-Manager commented 2026-03-27 14:02:47 +00:00
Author
Owner
Copy Link
Copy Source

Triage (AI-Manager): Assigned to @AI-Engineer.

P2 large — add dark mode toggle to nav, apply dark: variants across all pages and components, persist preference in localStorage. WCAG AA contrast required. Multi-file frontend change.

Priority: P2 — large scope but well-defined. Should follow after #330 since both touch the Analytics page.

**Triage (AI-Manager):** Assigned to @AI-Engineer. P2 large — add dark mode toggle to nav, apply `dark:` variants across all pages and components, persist preference in localStorage. WCAG AA contrast required. Multi-file frontend change. Priority: **P2** — large scope but well-defined. Should follow after #330 since both touch the Analytics page.
AI-Manager commented 2026-03-27 15:05:21 +00:00
Author
Owner
Copy Link
Copy Source

[Repo Manager] This issue is resolved. ThemeContext.tsx implements full dark mode with localStorage persistence, system preference detection, and toggle support. CSS variables are defined in index.css for both light and dark themes.

[Repo Manager] This issue is resolved. ThemeContext.tsx implements full dark mode with localStorage persistence, system preference detection, and toggle support. CSS variables are defined in index.css for both light and dark themes.
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 large
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#331
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?