The CSS media query
prefers-color-scheme 1 evaluates to one of
no-preference, indicating whether the operating system is set to a dark or light theme. It’s currently supported by Safari on macOS, and Firefox 67 (beta).
Supporting this would be a natural fit for Discourse, since Discourse already supports user-selectable themes, and most themes (including the defaults) have light and dark variants. In particular, it would make sense to let the administrator set a separate default theme for light and dark mode, for users who have not chosen a theme in their Discourse profile.
Currently, Discourse handles selecting a theme on the server side (except in the theme selector’s live preview where the handling is duplicated in JS ), while a CSS query can only be evaluated client-side, creating an obstacle. The simplest solution would probably be to have the server send both dark and light themes, perhaps bundled into one CSS file, each wrapped in an appropriate
window.matchMedia) and choose a CSS file based on that.
Also note that changing the OS theme should ideally change the Discourse theme without having to reload the page. Using
window.matchMedia allows listening for changes.
We’ve discussed this a bit internally, and @pmusaraj has an experimental theme component that takes advantage of this (maybe he can share it here on Meta? not sure what state it’s in).
The spec is likely a bit too early for us to adapt in Discourse by default… as far as I know it’s not even finalized yet, and we don’t support beta versions of browsers, so we’re talking about only desktop Safari 12.1 users… which is a very very small number of people when you look at overall browser share.
I do agree, it’s a very cool feature that would be nice to utilize.
It’s in Firefox 67 too AFAIK?
So will be in stable on May 14th:
Firefox 67 is in the Beta channel and ships to our stable release users on May 14th
The chrome situation is less clear although --enable-blink-features=MediaQueryPrefersColorScheme is apparently already a thing.
Yeah we’ll definitely be supporting this once it is a bit more out there in shipping browsers. We’re watching this with great interest.
Less clear, but note that they’ve just landed an implementation on trunk, and the milestone is set to M75 which will be released as stable on June 3. So there’s a good chance Chrome will support it reasonably soon.
Sure, and there’s already a flag for those brave enough to tinker.
I guess the one pro to Microsoft ditching their engine is that edge support won’t be too far behind?
There is an experimental theme component that does the automatic switch based on media queries:
window.matchMedia is not available server-side, as you note, the component evaluates in JS whether
prefers-color-scheme matches the current theme, and if not, sets the correct theme and reloads the site with the updated theme.
What’s the current status on this? Firefox and Chrome both support passing the system theme preference now.