What
Add a light theme as an alternative to the current dark glassmorphism design.
Why
Some users prefer light themes, especially during daytime. Accessibility-wise, light themes can be easier to read for some people.
How
- Look at
src/styles/variables.css for the CSS custom properties
- Create a set of light-theme variables (backgrounds, text colors, borders)
- Add a theme toggle in
src/services/ThemeService.ts
- Use CSS
[data-theme='light'] selector to swap variables
- Add the toggle to the settings modal
- Persist the preference via
StorageService
Reference
The ThemeService already exists — it just needs a light variant.
What
Add a light theme as an alternative to the current dark glassmorphism design.
Why
Some users prefer light themes, especially during daytime. Accessibility-wise, light themes can be easier to read for some people.
How
src/styles/variables.cssfor the CSS custom propertiessrc/services/ThemeService.ts[data-theme='light']selector to swap variablesStorageServiceReference
The
ThemeServicealready exists — it just needs a light variant.