Support `prefers-color-scheme` CSS media query

The CSS media query prefers-color-scheme 1 evaluates to one of dark, light, or 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 @media block. An alternative would be to use JavaScript to query the theme (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 @media blocks, that happens naturally; with JavaScript, window.matchMedia allows listening for changes.

9 Likes

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.

4 Likes

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.

4 Likes

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.

5 Likes

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.

4 Likes

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?

3 Likes

There is an experimental theme component that does the automatic switch based on media queries:

Because 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.

6 Likes