Color-scheme - Propriété CSS
Résumé des caractéristiques de la propriété color-scheme
normal | dark | light | only dark | only lightcolor-scheme passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de color-scheme..
color-scheme.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description de la propriété color-scheme.
La propriété color-scheme bascule d'un affichage clair à un affichage sombre ou vice-versa.
La plupart des système d'exploitation utilisent au moins un affichage en modes clair (light) encore appelé mode jour, et un affichage
en mode sombre (dark) encore appelé mode nuit. Sur un téléphone mobile, le basculement en mode sombre est en principe automatique.
Sur un ordinateur de bureau, l'utilisateur peut choisir le mode avec color-scheme.
En mode sombre, le navigateur ajuste les couleurs des contrôles de formulaires, des barres de défilement, etc.
La propriété color-scheme peut être appliquée sur la source de la page (sélecteur :root) : une seule écriture suffit à basculer
l'ensemble des éléments dans un mode donné.
Mais il est tout à fait possible de l'appliquer à des éléments, particulièrement s'il s'agit de contrôles de formulaire.
Reportez vous également à la fonction light-dark() pour voir comment définir les couleurs correspondant a chacune des palettes de couleurs.
Valeurs pour color-scheme.
- color-scheme: normal;
L'élément s'affiche sans tenir compte de la palette de couleurs actuellement choisie.
- color-scheme: dark;
L'élément) s'affiche toujours en mode sombre.
- color-scheme: light;
L'élément s'affiche toujours en mode clair.
- color-scheme: only light; color-scheme: only dark;
Interdit au navigateur de changer les couleurs pour cet élément. Ci-dessous, la case à cocher et les boutons radio sont positionnés sur
only light.
- color-scheme: initial; (normal) color-scheme: inherit; color-scheme: revert; color-scheme: revertLayer; color-scheme: unset;
Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de color-scheme.
La propriété color-scheme peut être animé de façon discrète, c'est à dire que le passage d'une valeur à l'autre se fait brutalement,
sans transition. Pour que la demo soit plus parlante, on a dû faire appel à la fonction light-dark().
Exemple interactif avec la propriété color-scheme.
Le simulateur présente quelques contrôles de formulaire (case à cocher, zone de texte, etc.) car ce sont les composants les plus sensibles au changement
de schéma de couleurs. Les options ci-dessous agissent sur ces composants. On retrouve également les boutons Clair et Foncé
qui agissent sur l'ensemble de la page.
Compatibilité des navigateurs avec color-scheme.
color-scheme permettant de choisir le schéma de couleurs de l'affichage (mode nuit ou mode jour).color-schemeNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Safari
Opéra
Safari sur IOS
Firefox pour Androïd
Chrome
Firefox
Edge
Chrome pour Androïd
Androïd Brower
KaiOS Browser
Opéra mini
Histoire de la propriété color-scheme.
-
Module CSS - Ajustement des couleurs - Niveau 1
Concernantcolor-scheme. Introduction de la propriétécolor-scheme.
21 Mai 2019Document de travail.
10 Février 2022Candidat à la recommandation.
Voir aussi, à propos de l'ajustement des couleurs.
Les spécifications CSS éditées par le W3C sont organisées en modules.
La propriété color-scheme fait partie du module Module CSS - Ajustement des couleurs, dans lequel vous trouverez également les définitions suivantes.