prefers-color-scheme

Se você definiu privacy.resistFingerprinting como true, prefers-color-scheme será substituída pela light.

O prefers-color-scheme CSS media feature é usado para detectar se o usuário solicitou que o sistema use um tema de cores claras ou escuras.

Syntax

no-preference
Indica que o usuário não fez nenhuma preferência conhecida pelo sistema. Este valor da palavra-chave é avaliado como false no contexo booleano.
light
Indica que o usuário notificou o sistema de que prefere uma interface com um tema claro.
dark
Indica que o usuário notificou o sistema de que prefere uma interface com um tema escuro.

Exemplos

Os elementos abaixo têm um tema de cores inicial. Eles podem ser mais temáticos de acordo com a preferência do esquema de cores do usuário.

HTML

<div class="day">Dia (inicial)</div>
<div class="day light-scheme">Dia (modificar e utilizar um tema claro)</div>
<div class="day dark-scheme">Dia (modificar e utilizar um tema escuro)</div> <br>

<div class="night">Noite (inicial)</div>
<div class="night light-scheme">Noite (modificar e utilizar um tema claro)</div>
<div class="night dark-scheme">Noite (modificar e utilizar um tema escuro)</div>

CSS

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

Resultado

Especificações

Especificação Estado Comentários
Media Queries Level 5
The definition of 'prefers-color-scheme' in that specification.
Rascunho editorial Definição inicial.

Compatibilidade dos navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
prefers-color-scheme media featureChrome Full support 76Edge Full support 79Firefox Full support 67IE No support NoOpera Full support 62Safari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS Full support 13Samsung Internet Android No support No
no-preference value
DeprecatedNon-standard
Chrome No support 76 — 80Edge No support 79 — 80Firefox No support 67 — 79IE No support NoOpera No support 62 — 71Safari Full support 12.1WebView Android No support 76 — 80Chrome Android No support 76 — 80Firefox Android No support NoOpera Android Full support 54Safari iOS Full support 13Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

Veja também