Sync Interface Theme with System Color Preference

[antoniosarro]

Idea Overview
Enable system color preference tracking: allow the interface to respect and adapt to the user's system-wide dark mode setting.

Is your feature request related to a problem? Please describe.
Currently, the interface only provides a toggle between dark and light modes, which may not be in sync with the user's system preferences. This can lead to inconsistencies in the user experience, particularly for users who rely on their system settings to control their visual environment.

Describe the solution you'd like
Add an option to track the system color preference and automatically adapt the interface theme accordingly. This would ensure that the interface is in sync with the user's preferred visual settings.

[antoniosarro]

The problem with the current system is that when rehydrating from a fresh start, the first time rehydrateStore fires, it correctly applies the system's preferred dark mode. However, when logging out using clearAllStores, it sets the light mode in local storage, effectively overriding the system preferences.

The best solution would be not to save the "light" value when logging out, or check each time if there is a system preferred value and overwrite it before checking the localStorage.

[IRHM]

Hi @antoniosarro this is a good idea. I think the best solution, as mentioned, would be to create a new theme option "System", which we could set as the new default value.

If set to "System", we can always check the preferred theme on first load of watcharr. We'd also likely want to add some sort of event listener (if exists) so we can react to any changes on the system straight away without a refresh required (might be useful for anyone using a scheduled automatic dark/light mode).

(let me know if you'd like to work on this one too, i can assign you, no worries if not)