La valeurcolor-scheme pour l'attributname de l'élément HTML<meta> indique un schéma de couleurs suggéré que les agents utilisateur·ice·s doivent utiliser pour une page.Si elle est spécifiée, vous définissez le schéma de couleurs à l'aide d'un attributcontent dans l'élément<meta> avec une valeur CSScolor-scheme valide.

La couleur de thème fonctionne auniveau du document de la même manière que la propriété CSScolor-scheme spécifie les schémas de couleurs préférés et acceptés deséléments individuels.L'utilisation principale de<meta name="color-scheme"> est d'indiquer la compatibilité et l'ordre de préférence pour les modes clair et sombre.Par exemple, pour indiquer qu'un document préfère le mode sombre mais prend aussi en charge le mode clair :

<meta name="color-scheme" content="dark light" />

Vos styles peuvent s'adapter au schéma de couleurs actuel en utilisant la fonctionnalité CSSprefers-color-scheme.

Notes d'utilisation

Un élément<meta name="color-scheme"> possède les attributs supplémentaires suivants :

content

Un élément<meta> avecname=color-scheme doit avoir un attributcontent qui définit le schéma de couleurs comme une valeur CSScolor-scheme.L'attributcontent peut être l'une des valeurs suivantes :

normal

Le document ne gère pas les schémas de couleurs et doit être affiché avec la palette de couleurs par défaut.

light,dark,light dark,dark light

Un ou plusieurs schémas de couleurs pris en charge par le document.Plusieurs schémas de couleurs indiquent que le premier est préféré par le document, mais que le second est acceptable si l'utilisateur·ice le préfère.Spécifier plusieurs fois le même schéma de couleurs a le même effet que de le spécifier une seule fois.

only light

Indique que le documentne prend en charge que le mode clair, avec un arrière-plan clair et des couleurs de premier plan foncées.only darkn'est pas valide, car forcer un document à s'afficher en mode sombre alors qu'il n'est pas compatible peut rendre le contenu illisible et tous les principaux navigateurs utilisent par défaut le mode clair si rien n'est configuré.

mediaFacultatif

Tout type ou requête média valide.Si fourni, les options pour le schéma de couleurs du document définies dans l'attributcontent sont suggérées au navigateur lorsque la requête média correspond.Ceci est surtout utile pour la fonctionnalité CSSprefers-color-scheme.

Exemples

Utilisation d'un mot-clé color-scheme

L'exemple suivant indique au navigateur que la page prend en charge à la fois les thèmes clair et sombre.Le schéma de couleurs utilisé dépend des préférences utilisateur·ice, comme les réglages du système d'exploitation ou du navigateur :

<meta name="color-scheme" content="light dark" />

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété CSScolor-scheme
• La requête médiaprefers-color-scheme