light-dark()

Définition

Fonction CSS qui retourne la première valeur en mode clair et la seconde en mode sombre. Elle nécessite color-scheme: light dark sur l'élément. Baseline « Newly available » depuis mai 2024.

Analogie

Comme un interrupteur jour/nuit qui bascule automatiquement l'éclairage de la pièce.

Exemple de code

:root {
  color-scheme: light dark;
}
body {
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(#111, #eee);
}

Cas d'usage

Implémenter un thème clair/sombre sans média query ni classes JS pour les valeurs de couleur.

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark