Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:1.5 hours
96695 6handyvanillajavascriptplugins 070617 materialize2 400x277
  • Overview
  • Transcript

2.7 Darkmode.js

As I’m sure you’ve noticed, dark mode or “night mode” has been really popular lately. Apps like Facebook and Instagram have a dark mode, iOS caters for it natively, macOS and Windows have it, and it’s starting to show up on websites as well. In fact, recently, Facebook implemented dark mode on its desktop website.

Now, creating a dark mode switcher from scratch can be a very time-consuming process. You basically have to rewrite a lot of CSS and change most of your colours. Thankfully, there is a vanilla JavaScript plugin called Darkmode.js which uses mix-blend-mode to instantly add a dark mode to your website. So let’s check it out and see what it’s all about.

Related Links

2.7 Darkmode.js

As I'm sure you've noticed, dark mode or night mode has been really popular lately. Apps like Facebook and Instagram have a dark mode. iOS has it, Mac OS, and Windows have it. And it's starting to show up on websites as well. In fact, recently, Facebook implemented this on their desktop website. Now creating a dark mode from scratch can be a very time-consuming process. You basically have to rewrite a lot of CSS and change most of your colors. Thankfully, there is a vanilla JavaScript plugin called Darkmode.js which uses mix-blend-mode to instantly add a dark mode to your website. So let's check it and see what it's all about. You can find the plugin at this address right here. And once you install it, it basically adds this toggle to your website. And you can click it to go from light mode to dark mode and then back. How cool is that? Now I've also prepared a little demo here. It's just a random page with random content. So to get started, what you need to do is copy this script or load the script into your page. I'm gonna do that at the very bottom of my page. And then inside, I'm gonna do this var, I'm gonna call it dark mode = new Darkmode. And then to this I can pass in certain parameters. And then I can say darkMode.showWidget. Cool, now let's check it out. Here's my website and here's the widgets. And just like that, I have darkmode on my website without having to write a single line of CSS. Now, as I was saying this plugin is using a CSS property called mix-blend-mode. And mix-blend-mode, if we open up the developer page from Mozilla, it says the following. The mix-blend-mode CSS property sets how an element’s content should blend with the content of the element’s parent and the element’s background. And they also give out some examples here. Okay, the syntax is pretty simple. It's set automatically for you. And now let's go ahead and see how we can customize this. Because right now, I just have a black or white circle. And I wanna be able to make it look a little bit better. For that, I'm gonna start by setting the bottom and right properties to 2REM and that's gonna alter its position slightly. And then in CSS, I can do the following, darkmode toggle. And if you're wondering what dark mode toggle is, let's open up the inspector, okay, dark mode toggle is the actual button that you click on to change the mode. So what I wanna do is I wanna add some icons inside this button. When it's light mode, so when light mode is active and this button is black, I wanna add a white moon icon. When I enter dark mode, I wanna add a black sun icon. I already have the icon so I just grabbed them from an icon set called feather on icon finder. You can find the link to that in the lesson notes. I have them right here as SVGs and I'm gonna do the following. I'm gonna set a background as 20 2a 2e. This is the dark background and URL. I'm gonna set it to icon-moon.svg. I'm gonna center the icons. I'm gonna set no repeat. And I'm also gonna set important so that the original icon is replaced or the original backgrounds. Now notice that when I toggle this, we get an additional class called darkmode-toggle-white. So let's target that darkmode-toggle-white. Okay, background, I'm gonna go to FB, FB, FB so not pure white URL, icon-sun.svg. And again, center center, no repeat important. So now because of that I have a nice icon being added. Now what if you want to ignore certain items? For example, this list of links here? Well, that's really easy to do, by adding a class called darkmodeignore. So it will go on something like this dark mode, ignore save. So now you'll see that this particular element stays exactly the same regardless of my mode. There are other ways you can ignore an element. You can, for example, use the property isolation with the value isolate to an element in CSS. This will ignore that element. And you can also add this one mix-blend-mode difference to that particular element and that will also ignore it. It's basically gonna reverse what the plugin is doing in the first place. Now, if you don't like the look of things once you're in dark mode, you can actually change some things. When toggled in dark mode, the plugin adds a class of dark mode activated to the body, and you can take advantage of that target elements in this dark mode. So it would go something like this, darkmode-activated. And then you can target for example, an input type text, right? And you can change its background color, let's say CCC. Right, so now you'll see that the background of this element is different from the background of the other elements. Now with that said, you'll probably be tempted to go do something like this. You'll say that okay, when dark mode is activated, I want the background color of the sample to be white. So you'll do this, that doesn't work. It's still black, or you'll say that okay, maybe I want it to be red or not red, it's cyan. This is happening because of that mix-blend-mode. Nothing is as you think it will be, right? So you kind of have to play around with the colors to get to the result that you want. So for example, if I do 333 as a background color, it's gonna be really light here even though 333 is a very dark color. But if I do CCC, it's gonna be darker here and lighter here. You see my point? So yeah, play around with it. And ultimately remember, that this is not exactly friendly with older browsers. mix-blend-mode, if we take a look at this website, works in the most recent browsers, that's cool, the most modern browsers. But it doesn't work in older versions, and it doesn't work in IE. So if you're still supporting IE, this will not work for you. Also, I wanna show you something else, prefers-color-scheme. If you have a browser that supports this bit, then when you're first loading the page, its gonna mimic the dark mode from your system. So right here, I'm using Mac OS. And this one has a light and a dark mode. When you're gonna switch between light and dark, the browser will mimic that behavior if you haven't already picked an option. If you've picked an option, then it's gonna remember that option. But let me just open this page in another browser. So I've just loaded this in Safari. And I'm not gonna change my option here, but instead, I'm gonna change this to light in my system and then I'm gonna refresh the page. And just like that, the page is now in light mode. If I'm gonna switch this back to dark, and I'm gonna refresh it, it switches to dark as well. But as soon as I choose an option here, It doesn't matter, What I choose on my system, it's gonna remember that option. And again, this works only in select browsers that support this bit, prefers-color-scheme. So I think as an experimental or cutting edge technology, this Darkmode.Js is actually pretty cool. But if you're looking for something that's gonna work in older browsers, then I'm afraid you're out of luck. And adding a dark mode to your website will require a lot more work than what I showed you here today. And that's Darkmode.Js. This plugin was the last on our list and I wanna thank you for sticking around till the end. I hope you got some good information out of this course. Don't forget to follow us on social media and stay tuned for more content like this. With that said, thank you very much for watching, I'm Adi Purdila. And until next time, take care.

Back to the top