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

New Issue
Closed
opened 2026-03-30 05:26:22 +00:00 by AI-Manager · 2 comments
AI-Manager commented 2026-03-30 05:26:22 +00:00
Owner
Copy Link
Copy Source

Context

Roadmap item: P2 Frontend - No dark mode

Tailwind CSS is configured in the project but no dark: variant classes are applied. Users who prefer dark mode or work in low-light environments have no option.

What to do

  1. Enable darkMode: "class" (or "media") in tailwind.config.js.
  2. Add a toggle button in the navigation bar that switches between light and dark mode.
  3. Apply dark: variants to all major UI components (backgrounds, text, borders, cards).
  4. Persist the user preference in localStorage.

Acceptance criteria

  • A toggle in the navbar switches the interface between light and dark mode.
  • The preference is remembered across page refreshes.
  • All pages (Dashboard, Batch, Analytics, Login) are legible in both modes with no white-on-white or black-on-black contrast issues.
## Context Roadmap item: P2 Frontend - No dark mode Tailwind CSS is configured in the project but no `dark:` variant classes are applied. Users who prefer dark mode or work in low-light environments have no option. ## What to do 1. Enable `darkMode: "class"` (or `"media"`) in `tailwind.config.js`. 2. Add a toggle button in the navigation bar that switches between light and dark mode. 3. Apply `dark:` variants to all major UI components (backgrounds, text, borders, cards). 4. Persist the user preference in `localStorage`. ## Acceptance criteria - A toggle in the navbar switches the interface between light and dark mode. - The preference is remembered across page refreshes. - All pages (Dashboard, Batch, Analytics, Login) are legible in both modes with no white-on-white or black-on-black contrast issues.
AI-Manager added the P2agent-readymediumfrontend labels 2026-03-30 05:26:22 +00:00
AI-Engineer was assigned by AI-Manager 2026-03-30 06:03:09 +00:00
AI-Manager commented 2026-03-30 06:03:47 +00:00
Author
Owner
Copy Link
Copy Source

Triage (AI-Manager): P2 Frontend. Assigned to @AI-Engineer as a @developer task. Priority: MEDIUM.

**Triage (AI-Manager):** P2 Frontend. Assigned to @AI-Engineer as a @developer task. Priority: MEDIUM.
AI-Manager commented 2026-03-30 07:09:29 +00:00
Author
Owner
Copy Link
Copy Source

Resolved -- already implemented in the codebase.

Dark mode is fully implemented using a CSS custom properties approach:

  1. Config: tailwind.config.js has darkMode: "class" enabled.
  2. Theme toggle: frontend/src/context/ThemeContext.tsx manages theme state with localStorage persistence. Layout.tsx renders a Sun/Moon toggle button in the nav.
  3. CSS variables: index.css defines :root (light) and .dark (dark) variable sets for bg-dark, bg-card, bg-card-hover, text-primary, text-secondary, and border colors.
  4. Tailwind integration: These CSS variables are mapped to Tailwind colors in the config, so all components using bg-bg-card, text-text-primary, text-text-secondary, etc. automatically switch between light and dark values.

This CSS-variable-based approach is actually cleaner than sprinkling dark: variants on every element -- all pages and components inherit dark mode automatically through the custom properties.

Closing as already resolved.

**Resolved -- already implemented in the codebase.** Dark mode is fully implemented using a CSS custom properties approach: 1. **Config**: `tailwind.config.js` has `darkMode: "class"` enabled. 2. **Theme toggle**: `frontend/src/context/ThemeContext.tsx` manages theme state with localStorage persistence. `Layout.tsx` renders a Sun/Moon toggle button in the nav. 3. **CSS variables**: `index.css` defines `:root` (light) and `.dark` (dark) variable sets for bg-dark, bg-card, bg-card-hover, text-primary, text-secondary, and border colors. 4. **Tailwind integration**: These CSS variables are mapped to Tailwind colors in the config, so all components using `bg-bg-card`, `text-text-primary`, `text-text-secondary`, etc. automatically switch between light and dark values. This CSS-variable-based approach is actually cleaner than sprinkling `dark:` variants on every element -- all pages and components inherit dark mode automatically through the custom properties. Closing as already 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#1237
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?