sbondCo
Sync Interface Theme with System Color Preference
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.
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.
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)
Sure you can assign it to me, I'll take a look as soon as I can.
I also experiment on how to create the buttons in the settings to choose the theme mode user prefers.
Is it okay with you if the store and all the utilities used to control the theme are grouped into a single package, for example "lib/theme/.."?
Or I continue to use the current global store plus the helper file etc
More than anything to have a visual order on where all the features related to the theme are located, given that now some things are in the global store, others in helpers etc.
In the end I managed it using the already existing files so as not to change the structure