Lacaractéristique médiaCSSprefers-color-scheme permet de détecter si un·e utilisateur·ice a demandé un thème clair ou sombre.L'utilisateur·ice indique sa préférence via un réglage du système d'exploitation (par exemple, mode clair ou sombre) ou via un paramètre de l'agent utilisateur·ice.

É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 ducolor-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 nonintégrés en HTML.Un exemple d'utilisation deprefers-color-scheme dans des SVG se trouve dans la sectionHéritage du schéma de couleurs dans les éléments embarqués.

L'utilisation deprefers-color-scheme est autorisée dans les éléments<svg> et<iframe> aveccross-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 ladocumentation SVG et pour plus d'informations sur les iframes, consultez ladocumentation 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 à utiliserprefers-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 chargeprefers-color-scheme, les deux thèmes seront soit clairs, soit sombres.

HTML

<div>Thème A (initial)</div><div>  Thème A (change si mode sombre à favoriser)</div><br /><div>Thème B (initial)</div><div>  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édiaprefers-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édiaprefers-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 attributsalt. 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 ducolor-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 ducolor-scheme de l'élément parent ; la requête@media permet de définir les styles du contenu SVG en fonction ducolor-scheme de l'élément parent.Dans ce cas, l'élément parent avec la propriété CSScolor-scheme est un<div>.

<div>  <img /></div><div>  <img /></div><div>  <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 HTTPSec-CH-Prefers-Color-SchemeIndication 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.) ouautres plateformes^(angl.).