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 …

@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…

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: https://classadder-howto.webflow.io/ 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 ad…

@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: [image] There might be a more elegant way to do this - I haven’t worked with c…

Heya, just in case you have missed it. @okazu found a solution: [image] Enable dark mode for your website Animations & Interactions I’ve implemented persistent dark mode in Webflow. Reference. https://persistent-dark-mode.webflow.io/

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:

Hi @okazu , How were you able to implement the dark mode feature?

Persistent Dark Mode

Design help Custom code

ChrisT August 5, 2020, 8:00pm 9

Heya,

just in case you have missed it.

@okazu found a solution:

Topic		Replies	Views
How can you persist dark mode across multiple pages? Animations & Interactions	6	7249	August 8, 2020
Enable dark mode for your website Animations & Interactions	19	28491	October 8, 2022
Persistent Dark / Light Mode across multiple pages Animations & Interactions	0	895	June 12, 2020
Embeded script still works when accessing anoter page Custom code	2	605	May 17, 2022
Dark and light mode Animations & Interactions	1	43	May 2, 2025

Persistent Dark Mode

Related topics