Originally created by: smith-and-web
Summary
Add a light theme as an alternative to the current dark theme, with user preference persistence.
Background
The current app only offers a dark theme. Some users prefer light themes, especially in well-lit environments or for accessibility reasons.
Requirements
- [ ] Create light theme color palette that maintains readability and contrast
- [ ] Add theme toggle in Kindling Settings dialog
- [ ] Persist theme preference in app settings
- [ ] Support system preference detection (optional: "Auto" option that follows OS theme)
- [ ] Ensure all components render correctly in both themes
- [ ] Test contrast ratios meet WCAG AA standards
Design Considerations
- Light theme should feel cohesive with the existing design language
- Consider a warm/soft white rather than pure white to reduce eye strain
- Accent colors may need adjustment for adequate contrast on light backgrounds
- Editor area should remain comfortable for extended writing sessions
Implementation Notes
The app uses Tailwind CSS with custom color tokens defined in app.css. The theme system could:
- Use CSS custom properties for color values
- Toggle a class on the root element (e.g.,
data-theme="light")
- Store preference via the existing
AppSettings system
Acceptance Criteria
- [ ] Light theme available in settings
- [ ] Theme preference persists across app restarts
- [ ] All UI components display correctly in light theme
- [ ] No accessibility regressions (contrast, readability)