1000 Outils

Générateur de variables CSS mode clair/sombre

Gérez facilement les couleurs de vos thèmes clair et sombre avec des variables CSS. Définissez le nom et les couleurs de chaque variable pour les deux modes, et notre outil génère automatiquement le code CSS avec les sélecteurs :root et [data-theme="dark"]. Exportez les deux thèmes séparément ou ensemble.

NomMode clairMode sombre

Mode clair

background
foreground
primary

Mode sombre

background
foreground
primary
:root {
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  --color-primary: #2563eb;
  --color-primary-foreground: #ffffff;
  --color-muted: #f1f5f9;
}

.dark, [data-theme="dark"] {
  --color-background: #0f172a;
  --color-foreground: #f8fafc;
  --color-primary: #3b82f6;
  --color-primary-foreground: #ffffff;
  --color-muted: #1e293b;
}

Les variables CSS comme fondation du mode sombre

Les variables CSS (custom properties) sont la méthode la plus efficace et la plus maintenable pour implémenter un mode sombre. Plutôt que de dupliquer tout votre CSS ou de maintenir deux fichiers séparés, vous définissez vos couleurs une seule fois sous forme de variables et les écrasez dans un sélecteur dédié au mode sombre. Toute l'interface se met à jour automatiquement. Notre générateur automatise la création de ce code en vous permettant de définir visuellement vos couleurs dans les deux modes.

Questions fréquentes

Outils similaires

🌈

Sélecteur de couleur

Choisissez une couleur et obtenez instantanément ses codes HEX, RGB et HSL, prêts à copier.

🌈

Générateur de dégradé CSS

Créez des dégradés CSS linéaires ou radiaux avec aperçu en direct et code CSS prêt à copier.

🌈

Verificateur de contraste WCAG

Verifiez que le contraste entre vos couleurs de texte et de fond respecté les normes WCAG AA et AAA.

🌈

Melangeur de couleurs

Melangez deux couleurs ensemble avec un ratio ajustable et découvrez la couleur obtenue.

🌈

Inverseur de couleur

Saisissez une couleur HEX et obtenez instantanément sa couleur inversee (negative).

🌈

Générateur de couleurs complémentaires

Trouvez les couleurs complémentaires, analogues, triadiques et split-complémentaires de votre teinte.