Enable dark mode for your website

Design help Animations & Interactions
1

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

2 Likes
2

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.

2 Likes
3

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

3 Likes
4

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

2 Likes
5

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:

6

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.

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.

7

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.

1 Like
8

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?

9

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

11 Likes
10

Thanks for sharing, very cool @okazu.

1 Like
11

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: GitHub - sandoche/Darkmode.js: 🌓 Add a dark-mode / night-mode to your website in a few seconds

1 Like
12

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

2 Likes
13 
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.

3 Likes
14

Hello!

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.


.Div-Block {
  isolation: isolate; 
}

</style>

is what I used.

15

Nice one Okazu! Any advice (or read-only link) on how to approach that??

16

@okazu wrote a blog here: How I added persistent dark mode in Webflow | by Oz Hashimoto | Prototypr

And here is his cloneaable: Persistent darkmode - Webflow

17

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.

18

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.

Project Alice

19

You can use cookies + custom code CSS to create alternative dark or light theme.

const toggleButtons = cookie => {
  const toggleButtons = $(`.${".toggle-buttons"}`);
  const toggleActiveClass = "active";
  const toggleActive = $("."+toggleActiveClass);
  const toggleButton = toggleButtons.find(".toggle-button");

  toggleButton.on("click", button => {

    const targetButton = $(button.currentTarget);
    const targetId = targetButton.attr("id");

    if (targetId === cookie) {
      $("body").addClass(cookie);
      $.cookie(cookie, "true", { expires: 7 , path: '/'});
    }
    else {
      $("body").removeClass(cookie);
      $.cookie(cookie, "", { expires: 7 , path: '/'});
    }

    if ( !targetButton.hasClass(toggleActiveClass) ) {
      targetButton.siblings("."+toggleActiveClass)
        .removeClass(toggleActiveClass);
      targetButton.addClass(toggleActiveClass);
    }
  });
}

The script adds a specific class to the body element if cookie exists. Cookie adds and removes when the button is clicked. With this class, you can refer to any element inside the body tag with CSS.

Thus, custom theme CSS will be preserved even after reloading the page and throughout the site.

JQuery Cookie plugin jQuery Cookie | jQuery Plugin Registry

20

Hey everyone,

Just adding to Okazu’s work. I used his code and was able to get it working on my site. However the theme mode wasn’t being persistent across pages under different folders.

To fix this, when you are pasting the footer code he provides in this blog post make sure you find and replace this line:

document.cookie = 'theme=' + (newState == 'light-mode' ? 'light' : 'dark');

with this updated line:

document.cookie = 'theme=' + (newState == 'light-mode' ? 'light' : 'dark') + expires + "; path=/";

then replace the word expires with the number days you want the dark mode/light mode cookie to be stored. If its a number higher than 999 make sure you don’t add any commas.

Hope it helps.

2 Likes