Outils CSS

Generateur de fonction CSS light-dark()

Générez des règles CSS color-scheme et light-dark() pour le mode sombre.

Chargement de l'outil...

Qu'est-ce que Generateur de fonction CSS light-dark() ?

Generateur de fonction CSS light-dark() est un outil dans le navigateur pour cette tâche : Générez des règles CSS color-scheme et light-dark() pour le mode sombre. La sortie reste lisible afin de la vérifier avant de l'utiliser sur un site publié.

Quick answer

The light-dark() CSS function returns one of two color values based on the current color scheme, making it easy to support light and dark modes without duplicating CSS rules.

Limitations

  • light-dark() only works when the color-scheme property is set on the document or element. Without it the function defaults to the first color.
  • The function accepts exactly two color values -- one for light and one for dark. Complex theme switching still requires custom properties or media queries.
  • Older browsers do not support light-dark(). Provide a fallback color before the light-dark() function in the property declaration.

Comment utiliser cet outil

  1. Ouvrez l'outil et saisissez les valeurs utiles.
  2. Vérifiez la sortie dans le panneau de résultat.
  3. Copiez seulement la partie adaptéeà votre page.
  4. Testez la modification avant publication.

A quoi il sert

  • Gagner du temps sur les tâches de publication récurrentes.
  • Préparer markup, CSS ou checklist avant lancement.
  • Eviter les petites erreurs faciles a manquer sur un site statique.

Erreurs frequentes

  • Copier la sortie sans verification.
  • Utiliser des URL locales au lieu des URL publiques finales.
  • Oublier de vérifier le dossier publié après le build.

Verification

  1. Toggle the page between light and dark mode using DevTools Rendering or the OS setting and verify colors switch correctly.
  2. Test in a browser that does not support light-dark() to confirm the fallback color is applied.

FAQ

Questions sur Generateur de fonction CSS light-dark()

Generateur de fonction CSS light-dark() fonctionne-t-il localement ?

Oui. Les outils actuels sont conçus pour produire une sortie dans le navigateur.

Faut-il tester la sortie ?

Oui. Vérifiez toujours la sortie dans votre template, votre navigateur et votre hébergement.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi