## Exploration: Add Dark Mode
### Current State
The app uses a static CSS theme defined in `src/styles/theme.css`. Color variables are hardcoded with light theme values. No theming infrastructure exists.
### Affected Areas
- `src/styles/theme.css` — Contains hardcoded color values
- `src/components/App.tsx` — Would need theme provider wrapper
- `src/hooks/` — New `useTheme` hook needed
- `localStorage` — For theme persistence
### Approaches
1. **CSS Variables + React Context** — Use CSS custom properties toggled via React context
- Pros: Native CSS, performant, no runtime overhead for style switching
- Cons: IE11 compatibility (not a concern for modern apps)
- Effort: Low
2. **CSS-in-JS (Styled Components)** — Replace static CSS with styled-components theming
- Pros: Type-safe themes, scoped styles, dynamic theming
- Cons: Requires refactoring all components, larger bundle size
- Effort: High
3. **Tailwind Dark Mode** — Use Tailwind's built-in dark mode classes
- Pros: Already using Tailwind, minimal setup
- Cons: Requires adding dark: prefix to every element, manual work
- Effort: Medium
### Recommendation
**CSS Variables + React Context** (Option 1)
Why:
- Lowest effort for the benefit
- Leverages existing CSS structure
- Performant (no JS in rendering path)
- Easy to extend later
### Risks
- Need to ensure all color values use CSS variables (currently ~30 hardcoded colors)
- SSR flash if theme applied after hydration (can be mitigated with inline script)
### Ready for Proposal
Yes — we have enough context to create a proposal. Recommend proceeding with `/sdd-propose` using Option 1 as the approach.