Feature Request: Dark Mode Toggle on Settings Page

[tomkis]

Feature Request: Dark Mode Toggle on Settings Page

Summary

Add a dark mode toggle to the settings page that allows users to switch between light and dark themes.

Motivation

Dark mode has become a widely expected feature in modern web applications. It reduces eye strain in low-light environments and is preferred by many users. Providing this option in the settings page gives users control over their experience.

Proposed Behavior

• A dark mode toggle should be added to the settings page.
• By default, the toggle should respect the user's OS-level color scheme preference using the CSS media query prefers-color-scheme: dark.
• Users can override the OS preference manually via the toggle.
• The user's manual preference should be persisted (e.g., in localStorage) so it survives page reloads.

Acceptance Criteria

• A toggle control is visible on the settings page for switching between light and dark mode.
• On first load (no saved preference), the app defaults to the OS color scheme preference (prefers-color-scheme).
• When the user manually toggles dark/light mode, their preference is saved and respected on subsequent visits.
• The dark mode styles are applied consistently across all pages/components.

Additional Context

This is a quality-of-life improvement that aligns with modern UX standards. Many popular frameworks and design systems (e.g., Tailwind CSS, Material UI) have built-in support for dark mode that could simplify implementation.