Qu'est-ce que Generateur de fonction CSS light-dark() ?
La fonction CSS light-dark() prend deux valeurs de couleur et selectionne automatiquement la premiere pour le mode clair et la seconde pour le mode sombre en fonction de la propriete color-scheme. Cela elimine le besoin de blocs de proprietes personnalisees CSS dupliquees ou d'un bouton de theme JavaScript pour une prise en charge basique du mode sombre.
Réponse rapide
La fonction CSS light-dark() retourne l'une des deux valeurs de couleur en fonction du schema de couleurs actuel, facilitant la prise en charge des modes clair et sombre sans dupliquer les regles CSS.
Last updated: 2026-05-25
Limites
- Light-dark() ne fonctionne que lorsque la propriete color-scheme est definie sur le document ou l'element. Sans cela, la fonction utilise par defaut la premiere couleur.
- La fonction accepte exactement deux valeurs de couleur -- une pour le clair et une pour le sombre. Les changements de theme complexes necessitent toujours des proprietes personnalisees ou des requetes media.
- Les navigateurs plus anciens ne prennent pas en charge light-dark(). Fournissez une couleur de repli avant la fonction light-dark() dans la declaration de propriete.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Choisissez les proprietes de couleur que vous souhaitez thematiser, comme la couleur du texte ou l'arriere-plan.
- Saisissez une couleur claire et une couleur sombre pour chaque propriete.
- L'outil genere la declaration color-scheme et les appels de fonction light-dark().
- Copiez le CSS et ajoutez la balise meta color-scheme dans l'en-tete de votre page.
A quoi il sert
- Ajouter un mode sombre basique a un site statique sans JavaScript.
- Creer des paires de couleurs claires et sombres pour le texte, les arriere-plans et les bordures.
- Construire un petit systeme de jetons de design utilisant light-dark() pour la coherence du theme.