Streaming live at 10am (PST)

Persistent Dark Mode

Hey y’all!

I’ve found several people around here posting ways to implement dark mode with Webflow. It works but the problem is the persistency. Once the user leaves the current dark mode page, the site don’t cache it. And apparently, there’s no out of the box way of doing it, I see that inevitably requires some custom code.

I’ve found this thread in Stack Overflow where someone is having the same problem and someone put it out a Javascript snippet to work. Here’s the link to that: https://stackoverflow.com/questions/61496094/persistent-dark-mode-while-navigating-pages-with-a-dark-light-mode-toggling-opti

I’m not in any way a code expert and I’m having problems into thinking how to implement this within Webflow. Does someone knows how to handle this out?!

Thanks!

1 Like

@danilo.leal - you’d have to set a cookie or a url parameter that follows the user as they navigate and is then read on page load to set the dark mode style(s).

Any idea or suggestions on how to do that?!

@danilo.leal - I would probably go the cookie route, I haven’t done this myself, but essentially you need to set a cookie when they make a selection, then on page load check for the cookie and apply styles based on the value or lack of cookie.

So something like:

User selects dark mode > set cookie “mode”, value “dark” and then change their current view to dark mode by apply a class on the click event where you set the cookie. Then on page load, check for the cookie, and if the value is dark or light apply your styles accordingly.

This article might help: https://electrictoolbox.com/jquery-cookies/#:~:text=Set%20a%20cookie,the%20user%20exits%20the%20browser.

jQuery is loaded by default on Webflow sites, so you should have the tools you need, just going to take some experimenting.

Thanks, dude! I’ll be checking in here to post updates on this topic. I’ve noticed some other folks with the same issue and everybody is hoping in the dark mode wagon, I’d imagine it would be of interest :slight_smile:

I’ve been exploring this out and haven’t got a way to set a toggle button as the trigger for the cookie to be stored. It’s also not clear to me how to set classes to specific elements once this toggle button is clicked. I see doing it as an animation as probably a bad way. Any thoughts?

Would using the Finsweet Class Adder be an option to get around using interactions?

They have set an example for a dark mode too:

Unfortunately, I’m not a developer so I can only suggest to take a look into their code. Maybe there is a way to bind the class adder trigger to a cookie?

@danilo.leal - check out this codepen in firefox: https://codepen.io/samuel-g/pen/WNrarRV
Chrome won’t let you set local cookies, but FF will.

You can open the inspector and look at the storage tab to see the cookie:

There might be a more elegant way to do this - I haven’t worked with cookies a lot, but it seems to work.

Note, you have to load the js-cookie library for this code to work, it’s like 700 bytes, so tiny, but necessary.

Heya,

just in case you have missed it.

@okazu found a solution:

1 Like

Dude! Thanks Chris. I’ve tried messing around with some of the options here but my limited knowledge and time haven’t got me anywhere. I’m hopeful now, thanks for letting me know :slight_smile: