color-scheme
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2022.
La propriété CSS color-scheme permet à un élément d'indiquer dans quels jeux de couleurs il peut être affiché de manière optimale. Les agents utilisateur adaptent les éléments suivants de l'interface pour correspondre au jeu de couleurs utilisé :
- la couleur de la surface du canevas ;
- les couleurs par défaut des barres de défilement et autres éléments d'interaction de l'interface ;
- les couleurs par défaut des contrôles de formulaire ;
- les couleurs par défaut des autres éléments de l'interface fournis par le navigateur, tels que les soulignements de la « correction orthographique ».
Les auteurs de composants doivent utiliser la fonctionnalité média prefers-color-scheme pour prendre en charge les jeux de couleurs sur les autres éléments.
Les choix courants de jeux de couleurs pour les systèmes d'exploitation sont « clair » et « sombre », ou « mode jour » et « mode nuit ». Lorsqu'un utilisateur sélectionne l'un de ces jeux de couleurs, le système d'exploitation ajuste l'interface utilisateur. Cela inclut les contrôles de formulaire, les barres de défilement et les valeurs utilisées pour les couleurs système CSS.
Exemple interactif
color-scheme: normal;
color-scheme: dark;
color-scheme: light;
<section class="default-example container" id="default-example">
<textarea id="example-element">Zone de texte</textarea>
</section>
#example-element {
width: 80%;
height: 50%;
}
Syntaxe
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;
/* Valeurs globales */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
La valeur de la propriété color-scheme doit être un des mots-clés suivants.
Valeurs
normal-
Indique que l'élément peut être rendu en utilisant les paramètres de jeu de couleurs de la page. Si la page n'a pas de jeu de couleurs défini, l'élément est rendu en utilisant les paramètres de couleur par défaut de la page.
light-
Indique que l'élément peut être rendu en utilisant le jeu de couleurs clair du système d'exploitation.
dark-
Indique que l'élément peut être rendu en utilisant le jeu de couleurs sombre du système d'exploitation.
only-
Empêche l'agent utilisateur de remplacer le jeu de couleurs pour l'élément.
Peut être utilisé pour désactiver les remplacements de couleur provoqués par le Thème sombre automatique, en appliquant
color-scheme: only light;sur un élément spécifique ou sur:root.
Définition formelle
| Valeur initiale | normal |
|---|---|
| Applicabilité | all elements and text |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
color-scheme =
normal |
[ light | dark | <custom-ident> ]+ && only?
Exemples
Adaptation aux jeux de couleurs
Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble de la page, color-scheme peut être déclaré sur l'élément :root.
:root {
color-scheme: light dark;
}
Pour activer la préférence de jeu de couleurs de l'utilisateur·ice sur des éléments spécifiques, déclarer color-scheme sur ces éléments.
header {
color-scheme: only light;
}
main {
color-scheme: light dark;
}
footer {
color-scheme: only dark;
}
En plus du CSS ci-dessus, inclure également la balise HTML <meta> <meta name="color-scheme"> dans le <head>, avant toute information de style CSS, pour informer les agents utilisateur du jeu de couleurs préféré et aider à éviter les flashs d'écran indésirables lors du chargement de la page.
Mettre en forme selon les jeux de couleurs
Pour mettre en forme des éléments selon les préférences de jeu de couleurs, utiliser la requête média prefers-color-scheme. L'exemple ci-dessous active l'utilisation des jeux de couleurs clair et sombre du système d'exploitation sur toute la page grâce à la propriété color-scheme, puis utilise prefers-color-scheme pour définir les couleurs de premier plan et d'arrière-plan souhaitées pour chaque élément dans ces jeux de couleurs.
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
.element {
color: black;
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
.element {
color: white;
background-color: black;
}
}
Vous pouvez aussi utiliser la fonction light-dark() et les fontions de <color> pour définir les couleurs de premier plan et d'arrière-plan pour les différents jeux de couleurs en utilisant une structure de code plus compacte :
:root {
color-scheme: light dark;
}
.element {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
Spécifications
| Specification |
|---|
| CSS Color Adjustment Module Level 1 # color-scheme-prop |
Compatibilité des navigateurs
Voir aussi
- La requête média
prefers-color-schemepour détecter les préférences de jeu de couleurs de l'utilisateur·ice. - La fonction
light-dark()pour définir les couleurs pour les jeux de couleurs clair et sombre. - Les autres propriétés liées aux couleurs :
color,accent-color,background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-coloretcolumn-rule-color - La propriété
background-image - La propriété
print-color-adjust - Utiliser des couleurs relatives