How to Create Dark Mode in Webflow

Learn how to create a dark mode in Webflow with CSS variables, a toggle button, and localStorage to remember the user’s choice.

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

Gemeos

Webflow development

From mockup to live website

SEO & GEO

Google visibility and AI search engines

CRO & Growth

Conversion rate optimization

Step	Action	Tool
1	Set up CSS variables for colors	Webflow Variables
2	Create a dark variant in the variables	Webflow Variables
3	Add a toggle button	Webflow Designer
4	Script to switch and remember the mode	JavaScript + localStorage

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

good to know

To respect the user's system preferences on first load, add this before the script: if (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.body.classList.add('dark-mode'); }. This automatically turns on dark mode for users who have it enabled in their OS.

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

How to Create Dark Mode in Webflow

Example

1. Define your CSS variables in Webflow

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

3. Add a toggle button

4. Add this script in the <body>

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials