Dark Mode

This template comes with full Light and Dark Mode support using Webflow’s native Variables feature. Every color in the system is powered by variables — so when the theme changes, the entire site updates automatically. No extra setup needed.

How it Works

Inside the template, there’s a dedicated Theme variables page.
Here you’ll find both the Light and Dark variable collections. All key colors (like Background, Foreground, Border, etc.) are defined once and respond automatically to the active theme — giving you a scalable, future-proof system.

Want to update the look? Just swap any color on the Theme page. Changes reflect across the entire site in both modes.

Toggle & Behavior

Each page includes a Light/Dark Mode toggle, built into the Page Header component. You can choose to show or hide this toggle using the component’s properties.

When a visitor clicks the toggle:

• It switches between themes by adding or removing the .dark-mode class on the .page-wrapper
• The entire page updates instantly thanks to Variables

Want to Customize?

Everything is already wired up. To personalize the experience:

• Edit your colors on the Theme page
• Control visibility of the toggle in the Page Header component