Générateur de thème clair et sombre (variables CSS)
Choisissez la couleur principale. Le générateur construit les deux palettes, vérifie le contraste de chaque paire et affiche l’aperçu côte à côte.
Mode d’emploiMode sombre à partir de la couleur de la marque
Disponible en: 
Générateur de thème clair et sombre (variables CSS): à quoi ça sert
Un thème sombre bien fait n’est pas l’inversion du thème clair. À partir de la couleur principale de votre marque, le générateur construit les variables CSS des deux thèmes (fond, surface, bordure, texte, texte secondaire, couleur principale et texte dessus) avec des gris neutres ou teintés de la couleur de la marque.
Le contraste de chaque paire de couleurs est calculé avec la formule WCAG et marqué AAA, AA ou insuffisant, et la couleur principale est ajustée pour dépasser 4,5:1 dans les deux thèmes. Le code change de thème selon le mode du système (prefers-color-scheme) et, si vous le souhaitez, aussi via un bouton avec data-theme.
Mode d’emploi
- Choisissez la couleur principale.
- Vérifiez l’aperçu et le tableau de contraste.
- Copiez les variables CSS.
Quand l’utiliser
- Créer le mode sombre d’un site.
- Construire la palette d’un nouveau projet.
- Vérifier l’accessibilité des couleurs.
Questions fréquentes
Pourquoi le mode sombre n’est-il pas une simple inversion des couleurs ?
Inverser donne un fond noir pur et des couleurs de marque criardes, ce qui fatigue les yeux. Un bon thème sombre utilise un fond gris très foncé, un texte presque blanc et une version plus claire de la couleur principale, pour garder le contraste sans éblouir.
Que signifient AA et AAA pour le contraste ?
Ce sont des niveaux des règles d’accessibilité WCAG. AA exige un contraste d’au moins 4,5:1 pour un texte normal ; AAA, 7:1. Le générateur affiche le ratio de chaque paire de couleurs et vous avertit quand l’une passe sous 4,5:1.
Comment changer de thème avec un bouton ?
Le code suit le mode du système (prefers-color-scheme) et aussi l’attribut data-theme sur html. Un bouton qui définit data-theme=dark ou light force le thème choisi ; l’outil Bouton de mode sombre de ce site génère ce bouton.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.