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

Dans cet exemple, on utilise un élément avec un arrière-plan sombre et un texte blanc à mons que l'utilisateur ait choisi un thème clair, auquel cas les couleurs seront inversées.

HTML

<div class="themed">Theme</div>

CSS

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

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 AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
prefers-color-scheme media feature
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 67IE Aucun support NonOpera Aucun support NonSafari Support complet 12.1WebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 67Opera Android Aucun support NonSafari iOS Aucun support NonSamsung 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

Étiquettes et contributeurs liés au document

Contributeurs à cette page : mdnwebdocs-bot, SphinxKnight
Dernière mise à jour par : mdnwebdocs-bot,