# Prise en charge de la requête média CSS \`prefers-color-scheme\`
**URL:** https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445
**Category:** Feature
**Created:** [Avril 19, 2019, 1:35 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445 "2019-04-19T01:35:36Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@comex](https://meta.discourse.org/u/comex)
#### Post date: [Avril 19, 2019, 1:35 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/1 "2019-04-19T01:35:36Z")
The CSS media query `prefers-color-scheme` [1](https://github.com/discourse/discourse/blob/master/lib/stylesheet/manager.rb#L37) 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).](https://caniuse.com/#search=prefers-color)
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](https://github.com/discourse/discourse/blob/master/lib/stylesheet/manager.rb#L37) (except in the theme selector’s live preview where the [handling is duplicated in JS](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/theme-selector.js.es6#L85)), 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.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [Avril 19, 2019, 2:09 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/2 "2019-04-19T02:09:10Z")
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.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [Avril 19, 2019, 2:25 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/3 "2019-04-19T02:25:17Z")
It’s in Firefox 67 too AFAIK?
> **[prefers-color-scheme CSS media feature - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)**
>
> The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.
> A user indicates their preference through an operating system setting (e.g., light or dark mode) or a user agent setting.
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](https://bugs.chromium.org/p/chromium/issues/detail?id=889087) although --enable-blink-features=MediaQueryPrefersColorScheme is apparently already a thing.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [Avril 19, 2019, 2:34 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/4 "2019-04-19T02:34:16Z")
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.
---
### Author:  [@comex](https://meta.discourse.org/u/comex)
#### Post date: [Avril 19, 2019, 2:36 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/5 "2019-04-19T02:36:18Z")
> [@Stephen](#):
>
> The chrome situation is [less clear](https://bugs.chromium.org/p/chromium/issues/detail?id=889087)
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.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [Avril 19, 2019, 2:38 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/6 "2019-04-19T02:38:23Z")
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?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [Avril 19, 2019, 11:04 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/7 "2019-04-19T11:04:57Z")
There is an experimental theme component that does the automatic switch based on media queries:
> [@Dark Mode Automatic Theme Switcher](https://meta.discourse.org/t/dark-mode-theme-switch-for-safari-on-macos/112071):
>
> warning Discourse now supports [Automatic Dark Mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593) in core, this component is now deprecated and should no longer be used. [Repository](https://github.com/pmusaraj/discourse-dark-mode): https://github.com/pmusaraj/discourse-dark-mode Installation instructions: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)What this does? This component allows automatic switching to a dark theme when the browser is set to dark mode. This works for logged-in users only on all browsers that support the [prefers-color-scheme](https://caniuse.com/#feat=prefers-color-scheme) media query. By de…
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.
---
### Author:  [@RosemaryOrchard](https://meta.discourse.org/u/RosemaryOrchard)
#### Post date: [Décembre 7, 2019, 11:43 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/8 "2019-12-07T23:43:30Z")
Quel est le statut actuel de cela ? Firefox et Chrome prennent désormais en charge la transmission de la préférence du thème système.
> **[prefers-color-scheme CSS media feature - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)**
>
> The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.
> A user indicates their preference through an operating system setting (e.g., light or dark mode) or a user agent setting.
---
### Author:  [@InPeaceWeTrust](https://meta.discourse.org/u/InPeaceWeTrust)
#### Post date: [Décembre 10, 2022, 4:59 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/9 "2022-12-10T04:59:50Z")
Des plans pour implémenter cela ? C’est un peu pénible de regarder les forums Discourse lorsque votre préférence est définie sur le mode sombre et que la plupart des autres sites web le respectent.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [Décembre 10, 2022, 7:21 UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/10 "2022-12-10T07:21:27Z")
Nous avons la fonctionnalité de mode sombre automatique depuis un certain temps maintenant. 👍
> [@Automatic Dark Mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593):
>
> You can now set up your Discourse site to automatically switch color schemes when the user’s device is in dark mode. For a quick preview, head over to the [try.discourse.org](http://try.discourse.org) instance and toggle your device’s dark mode on and off to see this new feature in action. (This feature not enabled on meta.) Enabling automatic dark mode To enable this feature on your instance, you can pick the dark mode color scheme in your site settings: Once that setting is set, you can reload your site with …