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
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'
);
});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
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
