prefers-color-scheme

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

no-preference
Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant au thème à utiliser. Dans un contexte booléen, cette valeur est évaluée comme false.
light
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire.
dark
Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.

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

Spécification État Commentaires
Media Queries Level 5
La définition de 'prefers-color-scheme' dans cette spécification.
Brouillon de l'éditeur Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
prefers-color-scheme media feature
Expérimentale
Chrome Support complet 76Edge Aucun support NonFirefox Support complet 67IE Aucun support NonOpera Aucun support NonSafari Support complet 12.1WebView Android Support complet 76Chrome Android Support complet 76Firefox Android Support complet 67Opera Android Aucun support NonSafari iOS Support complet 13Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

Voir aussi