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

Compatibilité des navigateurs

Voir aussi

• Revoir la conception d'un produit ou d'un site pour le mode sombre