Adding dark / light mode toggle

[kadda-tech]

Description

Add a dark / light mode toggle to improve user experience and accessibility by allowing users to switch between light and dark themes based on their preference.

Use Case

Many users prefer dark mode for reduced eye strain, especially in low-light environments, while others prefer light mode for readability during daytime use.
Providing a theme toggle improves accessibility, personalization, and overall user satisfaction.

Proposed Solution

Implement a theme toggle button in the application UI that allows switching between light mode and dark mode.

Suggested implementation:

• Add a toggle button in the navbar/settings area
• Store the selected theme in local storage to persist user preference
• Apply themes using a theme provider
• Detect and optionally default to the user's system preference (prefers-color-scheme)

Alternatives Considered

• Using only the system theme preference without a manual toggle

  • Rejected because users may want to override system settings

• Creating separate stylesheets for each theme

  • Considered less maintainable compared to CSS variables or a centralized theming solution

The proposed solution is preferred because it provides flexibility, better UX, and easier long-term maintenance.

TODO

• Documentation updated
• Update changelog

[jracenet]

Hey @kadda-tech 👋

Thanks for reporting this issue. The context, proposed solution and rejected alternatives made it really easy to review.

Dark/light mode is definitely something we want to add, and your approach sounds right. To be honest though, it's not in our short-term priorities right now, so I can't give you an ETA. We'll keep it in the backlog and pick it up when we have the bandwidth.

If you feel like opening a PR, we'd be happy to review it. And please keep filing issues like this one, it's super helpful.

Thanks again!