# Supporta la query media CSS \`prefers-color-scheme\`

**URL:** <https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445>\
**Category:** Feature\
**Created:** [19 Aprile 2019, 1:35am UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445 "2019-04-19T01:35:36Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![comex](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/comex/32/138828_2.png) [@comex](https://meta.discourse.org/u/comex)\
**Post date:** [19 Aprile 2019, 1:35am UTC](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445/1 "2019-04-19T01:35:36Z")

</div>

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.

---

_[View the full topic](https://meta.discourse.org/t/support-prefers-color-scheme-css-media-query/115445)._