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 featureChrome Support complet 76Edge Support complet 79Firefox Support complet 67IE Aucun support NonOpera Support complet 62Safari Support complet 12.1WebView Android Support complet 76Chrome Android Support complet 76Firefox Android Aucun support NonOpera Android Support complet 54Safari iOS Support complet 13Samsung Internet Android Aucun support Non
no-preference value
ObsolèteNon-standard
Chrome Aucun support 76 — 80Edge Aucun support 79 — 80Firefox Aucun support 67 — 79IE Aucun support NonOpera Aucun support 62 — 71Safari Support complet 12.1WebView Android Aucun support 76 — 80Chrome Android Aucun support 76 — 80Firefox Android Aucun support NonOpera Android Support complet 54Safari iOS Support complet 13Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Voir aussi