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

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

No compatibility data found. Please contribute data for "css.at-rules.media.prefers-color-scheme" (depth: 1) to the MDN compatibility data repository.

Voir aussi

Étiquettes et contributeurs liés au document

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