Comment créer un dark mode dans Webflow ?

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

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'
  );
});

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