Hi Webflow Community,
I found two great examples of creating dark mode in Webflow:
The only problem is these solutions do not work for multiple pages. With these approaches, if you navigate to another page, your css will revert back to the default style. For example, if your page loads in light mode and you switch to dark mode, after you navigate to another page you will be back in light mode.
Does anyone know how can you persist dark mode across multiple pages?
Hi Johnny,
I’m not a developer so my answer will be purely based on the concept.
So I think if you would add custom code to make your switch button a toggle that would work.
On home page load, you create a variable for the mode (day or night) style,
On click on your toggle button, you update the variable to store the new mode,
On every other page load, you check that variable to then apply the style to the page before it loads.
Some start of infos:
Maybe someone more qualified can help further.
You would have to leverage persistence using cookies. You could write a cookie to the visitor’s browser, then check for it on other pages. You could use that as a trigger for changing styles for example.
You would have to set and get with custom code using Javascript.
Are there any resources out there yet showing how to write this code to reference cookie information? I have built dark/light mode into the site I just launched and am trying to do the same thing. If I figure it out before someone else does I’ll post it here. Here’s my site where I’ve built the toggle in.
I would recommend using local storage. Easier to work with and simple to implement.
Thanks for the advice. Is there a more straight forward snippet of code that can just be dropped in to make this happen or does it have to be written from scratch? Trying to figure out the easiest way to implement since I’m not a developer or privy to JS.
FYI