Design

6 views

6 min

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

Good to know

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.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss