Lafonction de type<color>CSSlight-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êtemedia featureprefers-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 fonctionlight-dark() permet de fournir deux valeurs de couleur, toute valeur<color> étant acceptée. La fonction CSSlight-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 fonctionlight-dark(), la propriétécolor-scheme doit avoir la valeurlight 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-scheme clair.

couleur-sombre

Une valeur<color> à utiliser pourcolor-scheme sombre.

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 couleurlight-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 lesoutils 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>  <h2>Clair</h2>  <p>Cette section sera claire grâce à <code>color-scheme: light;</code>.</p></section><section>  <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 aussicolor-scheme sur:root pour activer la fonctionlight-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 fonctionlight-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 oudark.

.light {  /* force le thème clair */  color-scheme: light;}.dark {  /* force le thème sombre */  color-scheme: dark;}

section {  padding: 0.8rem;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétécolor-scheme
• Le type de donnée<color>
• Module CSS colors
• La propriétéprefers-contrast de@media
• La fonctioncontrast()
• WCAG : contraste des couleurs
• Propriétés personnalisées CSS etvar()