Menu

#139 Add light theme option

v1.1.0
open
nobody
2026-01-20
2026-01-20
Anonymous
No

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:

  1. Use CSS custom properties for color values
  2. Toggle a class on the root element (e.g., data-theme="light")
  3. 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)

Discussion


Log in to post a comment.

MongoDB Logo MongoDB