The CSS media query prefers-color-scheme1 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.
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.
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.
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.
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.
