Design

6 min

Comment créer un dark mode dans Webflow ?

Apprenez à créer un dark mode dans Webflow avec les variables CSS, un toggle bouton et le localStorage pour mémoriser le choix.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un dark mode dans Webflow grâce aux variables CSS et au localStorage.

Exemple

Gemeos

Intégration Webflow

De la maquette au site en production

SEO & GEO

Visibilité Google et moteurs IA

CRO & Growth

Optimisation du taux de conversion

Étape	Action	Outil
1	Définir les variables CSS pour les couleurs	Webflow Variables
2	Créer une variante dark dans les variables	Webflow Variables
3	Ajouter un toggle bouton	Webflow Designer
4	Script pour switcher et mémoriser le mode	JavaScript + localStorage

1. Définissez vos variables CSS dans Webflow

Dans le Designer, allez dans Variables. Créez des variables de couleur : --color-bg, --color-text, --color-surface. Assignez ces variables à tous vos éléments (backgrounds, textes, bordures) à la place des couleurs directes.

2. Créez la classe "dark-mode" sur le body

Ajoutez un embed CSS avec les valeurs dark de vos variables :

body.dark-mode {
  --color-bg: #0f0f0f;
  --color-text: #f5f5f5;
  --color-surface: #1a1a1a;
}

3. Ajoutez un bouton toggle

Créez un bouton dans Webflow et attribuez-lui l'ID theme-toggle.

4. Ajoutez ce script dans le <body>

const toggle = document.getElementById('theme-toggle');
const saved = localStorage.getItem('theme');
if (saved === 'dark') document.body.classList.add('dark-mode');
toggle.addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
  localStorage.setItem('theme',
    document.body.classList.contains('dark-mode') ? 'dark' : 'light'
  );
});

bon à savoir

Pour respecter les préférences système de l'utilisateur au premier chargement, ajoutez avant le script : if (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.body.classList.add('dark-mode'); }. Cela active le dark mode automatiquement pour les utilisateurs qui l'ont configuré dans leur OS.

Conclusion

Le dark mode améliore le confort de lecture et suit les préférences modernes des utilisateurs. Cas d'usage :

Sites de documentation ou blog technique
Outils SaaS et dashboards
Sites créatifs avec forte identité visuelle

Comment créer un dark mode dans Webflow ?

Exemple

1. Définissez vos variables CSS dans Webflow

2. Créez la classe "dark-mode" sur le body

3. Ajoutez un bouton toggle

4. Ajoutez ce script dans le <body>

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires