Recommandation de cours :

Fonction light-dark() CSS

Définition et utilisation, CSS light-dark() La fonction light-dark() permet de définir deux valeurs de couleur. Si l'utilisateur a configuré un thème clair, la première valeur est retournée ; si l'utilisateur a configuré un thème sombre, la deuxième valeur est retournée.

Pour utiliser light-dark() fonction, CSS color-scheme L'attribut doit être réglé sur light dark.

Astuce :Les utilisateurs peuvent spécifier leurs préférences de schéma de couleur en configurant le mode sombre ou clair du système d'exploitation ou des paramètres du navigateur.

Exemple

Utilisation light-dark() La fonction light-dark() active deux valeurs de couleur :

:root {
  color-scheme: light dark;
  --light-bg: neige;
  --light-color: noir;
  --dark-bg: noir;
  --dark-color: neige;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

Essayez-le vous-même

Grammaire CSS

light-dark(lightcolor, darkcolor)

Détails techniques

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge complètement cette fonction pour la première fois.

Pages connexes

Référence :Attribut color-scheme CSS

Référence :fonction var() CSS

Tutoriel :variables CSS