Light/dark mode switch powered by variables

Easily add a light/dark mode toggle to your website with the new Webflow variables.

How it works

1

Create variables

Create variables for both light and dark modes, then assign the light mode styles to your layout.

2

Add toggle

Create a toggle to switch between modes (or copy and paste the one here), with a class of "toggle_component".

3

Add custom code

Add the code from the <head> of this page to your site. Makes sure the names of the variables match the ones you've used.

Clone for free