<meta name="color-scheme">
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janvier 2022.
La valeur color-scheme pour l'attribut name 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 attribut content dans l'élément <meta> avec une valeur CSS color-scheme valide.
La couleur de thème fonctionne au niveau du document de la même manière que la propriété CSS color-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é CSS prefers-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-schemedoit avoir un attributcontentqui définit le schéma de couleurs comme une valeur CSScolor-scheme. L'attributcontentpeut ê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 document ne 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'attribut
contentsont 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
| Specification |
|---|
| HTML # meta-color-scheme |
Compatibilité des navigateurs
Loading…
Voir aussi
- La propriété CSS
color-scheme - La requête média
prefers-color-scheme