Skip to content

Add light theme option #5

@niklasmarderx

Description

@niklasmarderx

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

  1. Look at src/styles/variables.css for the CSS custom properties
  2. Create a set of light-theme variables (backgrounds, text colors, borders)
  3. Add a theme toggle in src/services/ThemeService.ts
  4. Use CSS [data-theme='light'] selector to swap variables
  5. Add the toggle to the settings modal
  6. Persist the preference via StorageService

Reference

The ThemeService already exists — it just needs a light variant.

Metadata

Metadata

Assignees

No one assigned

    Labels

    UIUser interface improvementsenhancementNew feature or requestgood first issueGood for newcomers

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions