Streaming live at 10am (PST)

Enable dark mode for your website

Hello,

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.

Please and thank you!
Rohit

1 Like

One way that I’m thinking about doing it is by having actual CSS variables.

They would be set through javascript and the flick of the switch related to dark-mode would trigger an update on those css vars.

https://www.w3schools.com/css/css3_variables.asp

Found this video on youtube. The only one I think pertaining to this topic and just for Webflow:

1 Like

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

1 Like

I agree. Also tried out https://darkmodejs.learn.uno/ but couldn’t get this to work. I’m not a full fledged developer per se so. :upside_down_face:

That is a good find, thank you, I had fun working with that. :grin:

The link provided an answer to this Dark Mode and is quite effective as it uses the
mix-blend-mode: difference property.

Basically if black is 0 and white is 255 then switching mode reverses the figures

The script goes in the body of the page

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js">
</script>
<script>
  new Darkmode({ label: '🌓' }).showWidget();
</script>

I have an example of some Headings, a paragraph, a Div block and a Text block which show the result
This Webflow page shows it in action
https://codepen-examples.webflow.io/dark-toggle

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.

<style>

.no__change {
  isolation: isolate; 
}

</style>

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.

https://caniuse.com/#search=mix-blend-mode

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?

I’ve implemented persistent dark mode in Webflow. Reference.
https://persistent-dark-mode.webflow.io/

5 Likes

Thanks for sharing, very cool @okazu.

1 Like

Thanks @okazu.

Do you know if it is possible to allow the site to default to the browser or OS dark/light setting? Rather than a manual toggle? I’m thinking of the prefers-color-scheme feature in browsers. See here: https://github.com/sandoche/Darkmode.js

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

const hours = new Date().getHours()
const isDayTime = hours > 6 && hours < 20

You could work from here and integrate this to whatever dark-mode solution you decide to use.

1 Like