prefers-color-scheme
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Note :
Si vous avez modifié privacy.resistFingerprinting
à vrai, le paramètre prefers-color-scheme
sera redéfini à light
.
Sinon, vous pouvez créer le paramètre numérique ui.systemUsesDarkTheme
pour redéfinier le comportement par défaut et retourner light
(valeur : 0), dark
(valeur : 1), or no-preference
(valeur : 2). (Firefox retournera light
si une autre valeur est utilisée.)
La caractéristique média prefers-color-scheme
permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).
Syntaxe
Exemples
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;
}
HTML
<div class="day">Jour (initial)</div>
<div class="day light-scheme">
Jour (modifié si utilisation d'un thème clair)
</div>
<div class="day dark-scheme">
Jour (modifié si utilisation d'un thème sombre)
</div>
<br />
<div class="night">Nuit (initial)</div>
<div class="night light-scheme">
Nuit (modifié si utilisation d'un thème clair)
</div>
<div class="night dark-scheme">
Nuit (modifié si utilisation d'un thème sombre)
</div>
Résultat
Spécifications
Specification |
---|
Media Queries Level 5 # prefers-color-scheme |
Compatibilité des navigateurs
BCD tables only load in the browser