light-dark()

Definition

Fonction CSS qui retourne la première valeur en mode clair et la seconde en mode sombre. Nécessite color-scheme: light dark sur l'élément pour fonctionner.

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 media query ni classes JS pour les valeurs de couleur.

Termes lies