How To Add Dark-mode To Your Website

what is up my name is Jay and in this video I want to show you how you can add dark a mode to your website or your web app so I'm here on the dark mode jes website and you can see they are explaining us like how it's done they're using mixed blend mode on the CSS you scroll down they have demos so you can take a look um so let's just keep scrolling down here and you can see they're giving us the code that we just need to add to our website you can use NPM and if you scroll down you will have more options that you can add to the dark mode alright so let's go ahead and let's test it so you can see here they have this little button with like an icon let's click and look at this dark mode yes so if you click back it's gonna toggle so it's like a toggle you know between the dark mode and the normal page and this is exactly what we're gonna do so I have here my page is a very simple HTML page um with one article and then another and a photo and then another article I have a button here so I want to add that little toggle here so let's go back and let's scroll down a little bit so I have all these options and I need this script so we can get the dark mojo yes I'm gonna copy let's go to my text editor alright so this is my page just simple HTML there is no JavaScript yet if you scroll down I have here a script but it's empty if I go to the file there's nothing here we're gonna add something I have some CSS already not much but I have some and then what I'm gonna do is before my script I'm gonna add the dark mode j/s right there okay I'm gonna save that let's go back and see what else we need to do so here you can see we need a script we're gonna do this in our own javascript file so let's scroll down because I want to add some of these options I want to play with them all right so I'm gonna go to my text editor I'm gonna go to my script file which is empty right now and I'm gonna create an options variable so I'm gonna do const options equals two and brackets is an object so now we can go back and we can just copy all this let's just copy all this and let's go back and let's paste it alright so you can see now we have this variable of options with all the lists of these options including the label which you can change it right there and now down here we're gonna do this new dart mode and then here we can add the options and now we're kind of you know getting all these options and putting in there and then I'm gonna do period show which all right I'm gonna say that I'm gonna go back to make sure that this is right all right so it seems like they created a dark mode and then a Dogma variable and then inside that they actually had a dish so let's do that I mean there's nothing wrong with this but I want to do that all right so now we have a Conte perfect let's remove this let's save it let's go back to my page let's see if this works just reload this page and there you see now we have here the icon let me click on it well dark mode look at this dark mode just click again and we go back alright so right now you can see is on the left side you can change it let's go back and let's see at the options so if I add here on the right instead of instead of unset I'm gonna do um 32 pixels and then on the left unset let's see that works okay there you go so now we have it here on the right side all right let's see what else we have here so we have the time of death animation I'm gonna add yeah it needs to be a little bit faster and we have more things background color save in actually this is interesting I'm gonna turn into true so that way it gets saved on the browser that we change it and now if we reload the page it's gonna stay dark or whatever we actually changed to it so I'm gonna reload this page like what I'm back to normal I'm gonna reload the page a couple times okay change it to dark I'm gonna reload the page and you can see actually it changed to dark for you um it gets saved on the browser alright so perfect I like that and then the label you can change it but I'm gonna leave it like that for now alright so one thing that I really really want to change is actually this it have a little bit more to the bottom let's change it here you go 64 let's change it to 32 let's see that worked it looks a little bit better there you go that's better alright so something that I do not like is that when you um go to the dark mode for example um it's using the the blend mode right so it's changing the color right now my orange is changing to the blue I want to keep my orange and that's something that I want to keep I don't want to change it doesn't matter what version if it's dark or if it's the like the normal version okay so it's very simple to do actually you just go to your CSS so let's go there and here I have the button and you can see my background is orange so what I'm gonna do I'm gonna add isolate isolation and then I'm gonna put isolate there you go that way it will not affect that specific element all right so let's go back let's see if that works let's go back to this version of the page let's reload and let's go back to dark mood here you go now I can keep my orange regular button and it works perfect so is that simple now you can join the dark side alright so that's it subscribe if you want to keep learning and click on the bell icon to receive notifications every time I upload a new video thank you so much for watching half a beautiful day bye bye

Channel: iEatWebsites

Views: 48,686

Keywords: dark-mode, darkmode, dark mode js, nightmode, night mode, add dark mode to website, add night mode to website, dark-mode library, darkmode library, add dark mode with javascript, how to add a dark-mode to your website in minutes, add dark mode to app, dark mode javascript, how to add dark mode to your website

Id: lJmw3zoEt3g

Length: 7min 49sec (469 seconds)

Published: Mon Jul 01 2019