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 February 2022.

La propriété CSS color-scheme permet d'indiquer les jeux de couleurs dans lesquels un élément peut être rendu sans risque.

Les jeux de couleurs communément utilisés par les systèmes d'exploitation sont light (clair) et dark (sombre), ou day mode (mode jour) et night mode (mode nuit). Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

Syntaxe

css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/* Valeurs globales */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
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 ne tient pas compte d'un éventuel jeu de couleurs et qu'il devrait être rendu à l'aide du jeu de couleurs par défaut du navigateur.

light

Indique que l'élément peut être rendu en utilisant le jeu de couleurs claires du système d'exploitation.

dark

Indique que l'élément peut être rendu en utilisant le jeu de couleurs sombres du système d'exploitation.

Définition formelle

Valeur initialenormal
Applicabilitéall elements and text
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrè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.

css
:root {
  color-scheme: light dark;
}

Spécifications

Specification
CSS Color Adjustment Module Level 1
# color-scheme-prop

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi