prefers-color-scheme
Nota: 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 com navegadores
BCD tables only load in the browser
Veja também
- Video tutorial: Coding a Dark Mode for your Website
- Redesigning your product and website for dark mode
- Changing color schemes in Windows, macOS and Android.