light-dark()
Baseline
2024
Newly available
Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La fonction de type <color> CSS light-dark() permet de définir deux couleurs pour une propriété : elle retourne l'une des deux couleurs selon que le·a développeur·euse a défini un thème clair ou sombre, ou que l'utilisateur·rice a choisi un thème clair ou sombre, sans avoir besoin d'encapsuler les couleurs dans une requête media feature prefers-color-scheme.
Les utilisateur·ice·s peuvent indiquer leur préférence de thème via les réglages de leur système d'exploitation (par exemple, mode clair ou sombre) ou de leur agent utilisateur. La fonction light-dark() permet de fournir deux valeurs de couleur, toute valeur <color> étant acceptée. La fonction CSS light-dark() retourne la première valeur si la préférence de l'utilisateur·rice est « clair » ou si aucune préférence n'est définie, et la seconde si la préférence est « sombre ».
Pour activer la prise en charge de la fonction light-dark(), la propriété color-scheme doit avoir la valeur light dark, généralement définie sur la pseudo-classe :root.
:root {
color-scheme: light dark;
}
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
Syntaxe
/* Couleurs nommées */
color: light-dark(black, white);
/* Couleurs RGB */
color: light-dark(rgb(0 0 0), rgb(255 255 255));
/* Variables personnalisées */
color: light-dark(var(--light), var(--dark));
Valeurs
Notation fonctionnelle : light-dark(couleur-claire, couleur-sombre)
couleur-claire-
Une valeur
<color>à utiliser pourcolor-schemeclair. couleur-sombre-
Une valeur
<color>à utiliser pourcolor-schemesombre.
Syntaxe formelle
<light-dark()> =
light-dark( <color> , <color> )
Exemple
Définir des couleurs selon le thème
Par défaut dans les navigateurs qui la prennent en charge, la couleur retournée par la fonction de couleur light-dark() dépend de la préférence de l'utilisateur·rice définie dans les paramètres du système d'exploitation (par exemple, mode clair ou sombre) ou dans les réglages de l'agent utilisateur. Vous pouvez aussi modifier ce réglage dans les outils de développement du navigateur.
HTML
On inclut trois sections pour cibler les couleurs claires, sombres et celles sélectionnées selon la préférence de l'utilisateur·rice.
<h1>La fonction CSS <code>light-dark()</code></h1>
<section>
<h2>Automatique</h2>
<p>Cette section réagit au réglage du système ou de l'agent utilisateur.</p>
</section>
<section class="light">
<h2>Clair</h2>
<p>Cette section sera claire grâce à <code>color-scheme: light;</code>.</p>
</section>
<section class="dark">
<h2>Sombre</h2>
<p>Cette section sera sombre grâce à <code>color-scheme: dark;</code>.</p>
</section>
CSS
On définit des couleurs pour les thèmes clair et sombre, puis on définit aussi color-scheme sur :root pour activer la fonction light-dark() sur tout le document.
:root {
/* doit être défini pour basculer entre clair et sombre */
color-scheme: light dark;
--light-bg: ghostwhite;
--light-color: darkslategray;
--light-code: tomato;
--dark-bg: darkslategray;
--dark-color: ghostwhite;
--dark-code: gold;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
code {
color: light-dark(var(--light-code), var(--dark-code));
}
En plus d'activer la fonction light-dark(), la propriété color-scheme permet d'outrepasser le thème de l'utilisateur·rice pour certaines sections du document. Forcer une section à n'utiliser qu'un thème clair ou sombre se fait en définissant la propriété color-scheme à light ou dark.
Note : Cela ne devrait généralement pas être fait, c'est uniquement à titre de démonstration. Si l'utilisateur·rice a exprimé une préférence, il ne faut généralement pas la surcharger.
.light {
/* force le thème clair */
color-scheme: light;
}
.dark {
/* force le thème sombre */
color-scheme: dark;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Color Module Level 5 # light-dark |
Compatibilité des navigateurs
Loading…
Voir aussi
- La propriété
color-scheme - Le type de donnée
<color> - Module CSS colors
- La propriété
prefers-contrastde@media - La fonction
contrast() - WCAG : contraste des couleurs
- Propriétés personnalisées CSS et
var()