How do you set up dark mode in Webflow?

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create a dark mode in Webflow using CSS variables and localStorage.

Example

1. Define your CSS variables in Webflow

In the Designer, go to Variables. Create color variables: --color-bg, --color-text, --color-surface. Assign these variables to all your elements (backgrounds, text, borders) instead of using direct colors.

2. Create the "dark-mode" class on the body

Add a CSS embed with the dark values for your variables:

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

3. Add a toggle button

Create a button in Webflow and assign it the ID theme-toggle.

4. Add this script in the <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

Dark mode improves reading comfort and matches modern user preferences. Use cases:

• Documentation sites or technical blogs
• SaaS tools and dashboards
• Creative websites with a strong visual identity