I’m trying to get a dark mode option available on my website, which as you’d expect turns the site to a dark theme with the flick of a switch. I know it has something to do with triggers and I also know there’s a similar topic out there on the forums (See: Create a "Dark Mode" in webflow!) but I wanted to bring this back up in 2020 as dark mode is literally everywhere these days. Looking for an answer in as much detail as possible.
Yes, but I’m sure that you can see that this approach is really far from ideal if your website have more than one page and several classes and etc. I’m afraid to say that that’s not a realistic approach to the problem. At one point, if you really want to have a seamless experience for your user and a intelligent way to develop things, you will have to turn to code
Say you don’t want something to change colour?
You put an embed block in the Navigator and add the class names in the script below and will prevent the change happening. In my case the last Div block has a class no__change and a background colour of yellow. If you flit between the two modes you should see it remain the same.
As I understand it mix-blend-mode doesn’t work on IE and Edge - typical. Some way of not showing the Mode button if it detects IE or Edge would be needed.
There are more improvements based on material found in the links which give more flexibility where the Mode button appears etc. So, there is more that can be done to improve on this moving forwards. Also, making it load from a txt file in Webflow is preferred.
Dark / Light mode is on the increase and this may be useful.
I implemented the mix-blend-mode way of doing dark mode on my site some time ago and it’s nothing short of a nightmare for text. The text gets really aliased and you’re going to have to manually alter pretty much anything anyways. So for text heavy sites I really can’t say it’s a good thing.
I just built out a dark and light mode for my site using a lottie toggle. However, I need to figure out how make that persistent on any page a user goes to by figuring out to pass cookie information so the experience is seamless. You can see it below. Anyone have a source on how to do this yet?
@healthdesign it would be sweet to be able to have the dark/light mode change based on time of day. Anyone have a clue on what that function would be or if there is some function out there that already exists??
Thank you for explaining a lil’ bit more about darkmodejs.
However, I was wondering what you meant by putting an embed block in the ‘navigator’?
If you meant Navbar, then I tried this but it doesn’t change anything. On top of it, webflow is highlighting the ‘isolation’ in red colour. Which might mean that it isn’t reading the property correctly.
Does anyone know how to control the styling of more than just one div using @okazu’s approach (i.e. the main div .light-mode)? I’ve seen some comments about this in the forum and Webflow showcase, but it as not yet been addressed.
Use case: Set background color of the main div to, say, black, and another div inside to grey for contrast purposes.
I’m using that template @okazu made as my base and rebuilding the div and container structures using the Wizardry 2.0 system. It’s a really nicely made dark mode toggle but I’m very new to website design and development, so I’m currently struggling to invert the svg lottie I used as the hamburger menu on tablet modes and below.
Otherwise, I’d really recommend it for people new to webflow.