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.