How does CSS media query prefers-color-Scheme work?

Question

From what I understand, it can be used to apply different styles according to user preferences.

.light, .dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .dark {
    display: block;
  }
}

@media (prefers-color-scheme: light) {
  .light {
    display: block;
  }
}

<div>Essa mensagem sempre será exibida</div>
<div class="light">Você está vendo a versão light</div>
<div class="dark">Você está vendo a versão dark</div>

In this case, the first <div> will always be displayed, regardless of user preferences, but the second and third will be displayed according to preferences, displaying the .light if the user chooses the Light theme, the .dark if the user chooses the Dark theme.

How will the browser set this value? When will the user set this preference? This comes from the browser or operating system?

Answer 1

The exact way the browser will interact with the OS I do not say exactly. What I can say is that the configuration of the color scheme is defined in the OS itself, and usually the intention to choose a theme dark or light is for reasons of color contrast thus improving accessibility. In the background this Feature was created to improve the reading of those who have legibility problems, reversing the pattern cora of white background and black font, for white font and black background (logically there are other color corrections for those who need auto contrast to be able to read on screens)

Today iOS and Windows 10 offer user options to configure the OS as a whole to work with a theme light (default) or theme Dark choose this option manually in the OS settings

See for example that by entering the configs of Win 10 you can choose to choose some of these themes that you think best to facilitate your reading on screens.

Chrome particularly doesn’t get stuck in it, it offers some plugins like the one that helps you to put the document you are accessing in auto contrast, or tema dark if you prefer https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph

I remember once again that the main point of this type of "artifice" is to improve accessibility and reading, not simply put a dark theme because it is cute. It has a sling behind the dark screens (in addition to saving some energy and saving battery on mobile devices, more sensitive to it). Here’s a very interesting article from 2019 that talks about the adoption of dark mode on Whatsapp and Google for example :D

https://www.techtudo.com.br/noticias/2019/04/o-que-e-modo-noturno-tela-escura-deve-chegar-ao-whatsapp-e-android-10.ghtml

The very one Material Design has a style guide that already treats the dark-theme https://material.io/design/color/dark-theme.html#ui-application Notice how it goes into some contrast accessibility details between Color/Background

a Google does not stop there. Recently was released the dark-mode for Google Chrome https://tecnoblog.net/278916/google-chrome-melhora-modo-noturno-windows/

In addition, Google’s own browser Chrome, is already able to recognize the preferences of the theme chosen by the user is enabled or not the dark-Theme including in the DevTools

Currently this dark screen feature has been widely used to improve the UX users, here on the website of William Justen https://willianjusten.com.br/ we can see an example of dark mode applied

So you don’t necessarily need CSS to change a theme. Don’t rely on the user’s OS to make your site accessible. Some people use it until hj Windows XP who is an OS who does not have the option of Color Scheme in the settings. So if you need to use JS to prepare your site to be more inclusive with those with vision problems. Do not wait for browser support for these new ones Features, better the UX already =)

Theoretically your code is correct and should work yes! But remember to consult the support of the browsers, because they are not all that has support to prefers-color-scheme

Source: https://caniuse.com/#feat=prefers-color-Scheme

OBS: It seems there are not many studies that prove that the dark screen better legibility or even productivity, actually contrary to this... I recommend reading this Medium article about this https://onezero.medium.com/dark-mode-isnt-the-answer-to-our-screen-problems-1b9db4ef06fb

---

The Future

Us Drafts of Media Queries de nível 5 there is still much more to come as can be seen in the official documentation of the W3C here https://drafts.csswg.org/mediaqueries-5/

Note that there will be several alternatives to treat colors for each type of user, thus trying to deliver a better UX for each user and for each type of disabled like Deuteranomalia , Tritanopia or Protanopia etc...

• prefers-Reduced-Transparency: The media resource of prefers-reduced-transparency is used to detect if the user has requested the system to minimize the amount of transparent or translucent layer effects it uses.
• prefers-Contrast: The media resource of prefers-contrast is used to detect if the user has requested that the system increase or decrease the amount of contrast between adjacent colors. For example, many users have difficulty reading text that has a small difference in contrast to the background of the text and prefer a higher contrast.
• Forced-Colors: The media resource of forced-colors is used to detect if the user-agent activated a forced color mode, where it applies a limited color palette chosen by the user on the page.

---

Disclaimer

In the beginning, dark mode is already used, as you can see in this interesting article https://web.dev/prefers-color-scheme/

Dark background with light letter is not something new, perhaps the first monitor text interface that has emerged has been dark with light letters. The Saudosistas will surely remember this image.