Skip to content

Add System / Light / Dark theme selection - #5468

Open
PlainSeer wants to merge 1 commit into
springfall2008:mainfrom
PlainSeer:feature/system-theme-mode
Open

PlainSeer wants to merge 1 commit into
springfall2008:mainfrom
PlainSeer:feature/system-theme-mode

Conversation

@PlainSeer

@PlainSeer PlainSeer commented Oct 10, 2026 •

Copy link
Copy Markdown
Contributor

PredBat already follows prefers-color-scheme, including live appearance changes, when no darkMode preference is stored. However, clicking “Toggle Dark Mode” saves an explicit Light/Dark preference, and the UI provides no way to clear it and return to following the system.

This also affects desktop users who occasionally want to choose Light or Dark manually, then return to automatic switching. Once they use the toggle, their choice remains saved across reloads. Toggling again only selects the opposite fixed appearance; restoring automatic behaviour requires manually clearing the browser’s stored preference.

Similarly, when viewing PredBat in the Home Assistant Companion app on an iPhone, a previously saved preference takes priority over the appearance reported by the embedded browser. If the browser reports an appearance change, PredBat ignores it while that override remains stored.

This change replaces the toggle with an accessible System / Light / Dark selector:

  • System removes the localStorage override, restoring the existing system-theme detection and live change listener.
  • Light and Dark save a fixed appearance independently of the system setting.
  • The selector displays the current mode.
  • Existing saved preferences remain compatible, using the same 'false' / 'true' storage format.

Users can choose a fixed theme whenever they need it, then select System to restore automatic switching. Removing the override lets PredBat’s existing detection work again without introducing a second theme-detection mechanism. Each browser or app stores its own preference independently.

The change preserves the existing pre-CSS flash prevention, logo switching, legacy media-query listener fallback, and page reload when choosing a mode.

Validation:

  • Theme preference, logo/flash-prevention, and web-function tests passed.
  • Added JavaScript behaviour tests covering saved preferences, all three choices, reload persistence, live system changes, legacy listeners, and browsers without matchMedia.
  • Repository quality checks passed.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant