Theme-ui: Default useColorSchemeMediaQuery to true

[mxstbr]

I seems like the default use case/expected behavior when having a dark & a light theme would be to match the darkmode media query. Could we default useColorSchemeMediaQuery to true to avoid folks having to dig through the docs to figure out whether that's the way it works or not?

[lachlanjc]

Totally agree with this. Since you have to manually add a color switcher to your site, it makes Theme UI seem broken that adding a dark mode to the theme & enabling your system dark mode doesn’t enable it.

[jxnblk]

My original gut instinct on this was that many users wouldn't necessarily expect the system-level dark mode to affect a website, but if the developer opts into the behavior, it's potentially less surprising. That said, most of these APIs are new and I don't know what best practices are going to emerge for things like this so maybe enabled by default makes more sense.

A somewhat related issue to this is that if you have the flag enabled, the dark/light mode cannot be controlled solely by the media query because the mode that it initializes as is stored in localStorage and then that takes precedence over the media query. I think if we do enable the media query initialization by default, that issue should be resolved as well -- i.e. only store a color mode if the setColorMode function has been called first

[saryekad]

Started using theme-ui a while ago and so far I'm loving it. Cool work 🙏🏼

But today I ran into this issue which was mentioned here as a side note by @jxnblk.

I enabled useColorSchemeMediaQuery in my theme and was expecting that my OS color scheme would be automatically adapted on the site whenever I load it.

Meaning if my OS is in dark mode and I load the site it should initially render with its dark color mode. And respectively it should render with its light color mode if the OS in light mode.

If I understood it correctly the way theme-ui works at the moment is that once a color mode is determined, for example via prefered-color-scheme on first load, that color mode is stored in local storage. Then on every subsequent reload that local storage value will take precedence over prefered-color-scheme.
So in effect the OS color scheme detection only works on first load. I didn't expect this. My gut feeling was the site would follow my system OS setting once I'm using preferred-color-scheme. The way it is now feels too static to me considering things like automatic OS color scheme switching based on the time of day which I'm using for example.

I'm not aware about the conventions regarding this rather new topic either.

Here are couple of thoughts and oddities that I can't find good answers to and that might influence how the local storage and color mode detection logic might be implemented in theme-ui.

• Is automatic light/dark mode OS detection helpful if it only happens the very first time a page is loaded?
• Even if it's detected every time correctly on reload, what if the site has a color mode switcher button and the user picked a different color mode afterwards? Should this now be preceding the OS setting?
• Should the concept of a binary dark/light mode maybe be treated differently to the more generic concept of multiple color modes / themes? I thought of dark/light modes as a subset of color modes but the UX implications are different I think: While dark/light modes change the UI luminance drastically the differences between other color modes might be more subtle.
• Should a simple dark/light toggle button actually have a binary state or could it rather have a ternary state with the third state being "automatic"? Thinking of macOS and iOS settings here that basically work like this.

Would be very curious about opinions and would also love to help out if something can be improved here with a PR.