Streaming live at 10am (PST)

How can you persist dark mode across multiple pages?

#1

Hi Webflow Community,

I found two great examples of creating dark mode in Webflow:

  1. http://darkmode.webflow.io/ by Philippe Da Ponte
  2. http://nightmode.webflow.io/ by Duncan Hamra

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?

#2

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:
https://www.w3schools.com/howto/howto_css_switch.asp

Maybe someone more qualified can help further.

1 Like
#3

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.

1 Like