dark mode: detect user's color theme preference

Since Dark mode has landed, it would be nice if we could use system’s color theme as default prefers-color-scheme

[dwelle]

props on @xixixao’s proposal.

@giuscri yes, I’d just set some key in localStorage. If present, it means you’re a returning user (provided you set it after you initially read it for the purpose of setting the theme).

In fact, we may wanna move appState.theme from appState to localStorage altogether (which we’ve discussed in a recent PR), because we’ll need to do so if we want to apply the theme to the initial loading screen. But I’m not sure how it’d tie in to the fact that we want it to be controlled by the app (core). /cc @ad1992 thoughts?

Ultimately it doesn’t matter and it can live in localStorage even if the app keeps it in appState after init. We’d just update another LS key on top of the elements/appState keys that we do in the onChange callback.

[xixixao]

@giuscri makes sense. I’m not sure whether we can prevent a flash, given you’re just opening the laptop after the dark mode switched.

Nevertheless, it would make sense to me follow the preference IF it has changed. So,

1. First time users should always see light mode
2. If you previously had light OS preference and light mode on, but now you have dark OS preference, the UI will switch to dark mode. (same the other way around)

If we get a PR we can test out how it feels.