prefers-color-scheme

Éléments embarqués

Pour les SVG et les iframes, prefers-color-scheme permet de définir un style CSS pour le SVG ou l'iframe en fonction du color-scheme de l'élément parent dans la page web. Les SVG doivent être utilisés en tant qu'éléments embarqués (c'est-à-dire <img src="circle.svg" alt="circle" />) et non intégrés en HTML. Un exemple d'utilisation de prefers-color-scheme dans des SVG se trouve dans la section Héritage du schéma de couleurs dans les éléments embarqués.

L'utilisation de prefers-color-scheme est autorisée dans les éléments <svg> et <iframe> avec cross-origin. Les éléments cross-origin sont des éléments récupérés depuis un autre hôte que la page qui les référence. Pour en savoir plus sur les SVG, consultez la documentation SVG et pour plus d'informations sur les iframes, consultez la documentation iframe.

Syntaxe

light

Indique que l'utilisateur·ice a exprimé le choix d'utiliser une interface à dominante claire, ou qu'il·elle n'a pas exprimé de préférence.

dark

Indique que l'utilisateur·ice a exprimé le choix d'utiliser une interface à dominante sombre.

Exemples

Détecter un thème sombre ou clair

L'usage courant consiste à utiliser un thème clair par défaut, puis à utiliser prefers-color-scheme: dark pour appliquer des couleurs plus sombres. Il est aussi possible de faire l'inverse.

Cet exemple montre les deux options : le thème A utilise des couleurs claires par défaut, mais peut être remplacé par des couleurs sombres. Le thème B utilise des couleurs sombres par défaut, mais peut être remplacé par des couleurs claires. Au final, si le navigateur prend en charge prefers-color-scheme, les deux thèmes seront soit clairs, soit sombres.

HTML

<div class="box theme-a">Thème A (initial)</div>
<div class="box theme-a adaptive">
  Thème A (change si mode sombre à favoriser)
</div>
<br />

<div class="box theme-b">Thème B (initial)</div>
<div class="box theme-b adaptive">
  Thème B (change si mode clair à favoriser)
</div>

CSS

div.box {
  display: inline-block;
  padding: 1em;
  margin: 6px;
  outline: 2px solid black;
  width: 12em;
  height: 2em;
  vertical-align: middle;
}

Le thème A (marron) utilise un schéma de couleurs clair par défaut, mais bascule vers un schéma sombre selon la requête média :

.theme-a {
  background: #ddccaa;
  color: #773311;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #775533;
    color: #ddccbb;
    outline: 5px dashed black;
  }
}

Le thème B (bleu) utilise un schéma de couleurs sombre par défaut, mais bascule vers un schéma clair selon la requête média :

.theme-b {
  background: #444477;
  color: #bbbbdd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bbccdd;
    color: #333344;
    outline: 5px dotted black;
  }
}

Résultat

Les boîtes de gauche montrent le thème A et le thème B tels qu'ils apparaîtraient sans la requête média prefers-color-scheme. Les boîtes de droite montrent les mêmes thèmes, mais l'un d'eux sera modifié en version sombre ou claire selon le schéma de couleurs actif de l'utilisateur·ice. Le contour d'une boîte sera en pointillés ou en tirets si le changement dépend de votre navigateur ou du système d'exploitation.

Héritage du schéma de couleurs dans les éléments embarqués

L'exemple suivant montre comment utiliser la caractéristique média prefers-color-scheme dans un élément embarqué pour hériter d'un schéma de couleurs depuis un élément parent. Un script est utilisé pour définir la source des éléments <img> et leurs attributs alt. Normalement, cela se ferait en HTML avec <img src="circle.svg" alt="circle" />.

Vous devriez voir trois cercles, dont un dessiné dans une couleur différente. Le premier cercle hérite du color-scheme du système d'exploitation et peut être modifié via le sélecteur de thème du système.

Le deuxième et le troisième cercle héritent du color-scheme de l'élément parent ; la requête @media permet de définir les styles du contenu SVG en fonction du color-scheme de l'élément parent. Dans ce cas, l'élément parent avec la propriété CSS color-scheme est un <div>.

<div>
  <img />
</div>
<div class="light">
  <img />
</div>
<div class="dark">
  <img />
</div>

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

// Intègre un SVG pour chaque élément <img>
for (let img of document.querySelectorAll("img")) {
  img.alt = "cercle";
  img.src = `data:image/svg+xml;base64,${window.btoa(`
    <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
      <style>
        :root { color: blue }
        @media (prefers-color-scheme: dark) {
          :root { color: purple }
        }
      </style>
      <circle fill="currentColor" cx="16" cy="16" r="16"/>
    </svg>
  `)}`;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété color-scheme
• L'élément <meta name="color-scheme">
• L'en-tête HTTP Sec-CH-Prefers-Color-Scheme Indication client de l'agent utilisateur
• Simuler prefers-color-scheme dans Firefox ^(angl.)
• Vidéo : coder un mode sombre pour votre site ^(angl.)
• Adapter votre produit ou site au mode sombre ^(angl.)
• Changer le schéma de couleurs dans Windows ^(angl.), macOS ^(angl.), Android ^(angl.) ou autres plateformes ^(angl.).