How Do I Set Up Dark Mode in Webflow With Variables?

How do you set up dark mode in Webflow using Variables?

You set it up by building your colors as Webflow Variables, then creating a second variable mode that holds the dark values. When you apply that mode, every element using those variables switches to dark at once. You control the whole theme from one place, instead of restyling each element by hand.

I love this approach because it turns dark mode from a chore into a switch. Get your variables right once, and the dark theme almost builds itself. Let me walk you through how it works and how to keep it clean.

This is a design and build task, so I will keep it practical and skip the jargon where I can.

What are variable modes in Webflow?

Variable modes let you store different values for the same variable. Your "background" variable can be near-white in the default mode and near-black in a dark mode. Webflow's docs describe modes as a way to switch between complete design systems, like light and dark themes, without changing the elements that use them.

The key idea is separation. Your elements point at a variable name, not a fixed color. The mode decides what that name resolves to. So one button style can look right in both themes, because it reads "surface" and "text" rather than a hard-coded hex value.

Once that clicks, theming stops being scary. You are no longer editing hundreds of elements. You are editing a small set of variables, and the modes do the rest.

Why use Variables instead of duplicating classes?

Because duplicating classes for a dark theme is a maintenance trap. If you make a "dark card" copy of every class, you now own two of everything, and every future change has to happen twice. Variables keep one source of truth. Change the variable, and both themes update together, which saves hours down the line.

I have inherited sites built the duplicate-class way, and they are painful. A small color tweak turns into a scavenger hunt across paired classes, and things drift out of sync. Variables prevent that drift by design. The value lives in one spot.

Fewer moving parts also means fewer bugs. When your theme logic sits in a tidy set of variables, you can reason about it. When it is scattered across duplicated styles, you cannot.

How do you create a dark mode with a variable mode?

Start by defining your colors as variables in the Variables panel, using role names like surface, text, and accent. Then add a new variable mode for dark, and give each variable its dark value. Finally, apply the dark mode to a wrapper or selector in the Style panel, and everything inside inherits the dark values.

Name your variables by role, not by look. Call it "surface," not "white," because in dark mode that surface is no longer white. Role-based names are what make the switch feel natural, since the same name makes sense in both themes.

Work through your core set first: page background, card surface, primary text, muted text, borders, and accent. Get those six right and most of your interface will theme correctly without touching much else.

How do you let dark mode follow the visitor's device setting?

You pair your variable modes with a small piece of custom code that reads the visitor's device color scheme. Webflow notes that you can support a visitor's light or dark preference this way, so someone whose phone is set to dark sees your dark theme automatically. You can also add a manual toggle for people who want to choose.

My preference is to respect the device setting first, then offer a toggle as a backup. Most people who want dark mode have already set it at the system level. Following that setting feels considerate, because the site matches what they already chose everywhere else.

If you add a toggle, remember the state. A visitor who picks dark should still see dark on the next page, which usually means storing their choice with a little more code.

How do you keep dark mode readable and accessible?

Do not just invert your colors. Dark mode needs its own contrast checks, because pure white text on pure black can feel harsh and can strain the eyes. Aim for soft off-white text on a dark gray surface, and test each pairing against contrast guidelines rather than trusting how it looks at a glance.

Contrast is where most dark themes fall apart. A gray that reads fine on white can vanish on black. I check every text and background pair in dark mode separately, since passing in light mode tells you nothing about the dark one. I wrote about the targets in what color contrast WCAG requires.

Links deserve extra care in dark mode, since your usual link blue may not stand out on a dark surface. I covered that in how to design accessible link styles.

What are common dark mode mistakes to avoid?

The big ones are pure black backgrounds, pure white text, and forgetting about images. Solid black with solid white flickers and tires the eyes, so soften both. Bright images and logos made for light backgrounds can glare in dark mode, so plan for versions that sit calmly on a dark surface.

Another miss is shadows. Drop shadows that give depth on a light background often disappear on a dark one. In dark mode, you usually lean on lighter surfaces and subtle borders to show elevation, rather than shadows that no longer read. A thin, slightly lighter border often does the job better than any shadow here.

Finally, do not forget form fields and states. Hover, focus, and disabled styles all need dark values too. It is easy to theme the obvious parts and leave inputs looking broken in dark mode.

Should every site have a dark mode?

No, not automatically. Dark mode is worth it when your audience expects it, such as developer tools, reading apps, and products people use at night. For a simple brochure site, a well-built light theme may serve you better than a half-finished dark one. A bad dark mode is worse than none.

My honest take is to only ship dark mode if you will maintain it properly. It doubles the surface you test, and a neglected dark theme with broken contrast hurts trust. If you cannot commit to keeping it clean, put that effort into making one theme excellent.

When it fits the audience, though, dark mode is a genuine mark of care. Done well, it signals that you sweat the details, and people notice.

What should you do next?

Audit your colors first. List every color your site uses, group them into roles like surface, text, and accent, and rebuild them as Webflow Variables. Once your variables are clean, add a dark mode and set its values. Then test every text and background pair for contrast before you ship it.

If you want a design system built so themes like dark mode stay easy to maintain, that is the kind of foundation I set up for clients. I am Pravin, an AEO and GEO specialist and Certified Webflow Partner in Bengaluru. Reach out at pravinkumar.co and let's chat about your site.