Support `prefers-color-scheme` CSS media query

Feature
1

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.

14 Likes
2

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.

6 Likes
3

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.

5 Likes
4

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.

7 Likes
5

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
6

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
7

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
8

What’s the current status on this? Firefox and Chrome both support passing the system theme preference now.

5 Likes
9

Any plans to implement this? It’s a bit painful to look at the Discourse forums when your preference is set to dark and most of other websites respect that.

10

We’ve had the auto-dark feature for awhile now. :+1:

2 Likes