An INSTANT Dark Mode Toggle Solution?! - DarkMode.js

today I'm going to show you how to use dark mode EAS which allows you to near instantly add a dark mode toggle to your site hey everyone what's up Gary Simon of course satchel com so today we're gonna check out implementing a dark mode toggle to your site now in the past I did do a tutorial where I showed you how to create one from scratch and you can check that out on the channel search I'll try to remember to add it to my description if I don't remember please let me know in the comments I in basically dark mode j/s is a very quick way of doing that that takes away a lot of the legwork associated with having a dark mode toggle switch on your site so it here is the main page for dark mode j/s which will be linked in the description and it shows you a couple different demos that you can check out you know with how this thing actually works click on here very nice eye and we're going to show you how to use it how to install it and along with the available options and how to control an override different things based on what's high you know the needs of your user interface and how it interacts with I mix blend mode this is also inspired and I recall I recalled reading this article which was last month about using mix blend mode difference property in order to create a very quick solution for your toggle your dark mode toggle switch and that's what this uses very very cool stuff so as always make sure to subscribe if you haven't yet and let's get started ok so we're gonna first get started by just creating the basic project we're gonna write the HTML and the CSS from scratch it's gonna be very minimal but still I wanted to start from scratch so that you understand the HTML structure and the CSS properties and values just to see and understand how they interact exactly with dark mode EAS and how this whole effect works so I have a blank folder here in Visual Studio code I and I'm going to hit let's see index dot HTML we're going to create hit exclamation point enter underneath the title we'll just put in a link and then hit enter we're gonna link that to a CS folder main.css file let's create that real quick so a new folder of CSS and a main sass file alright so I have the the live sass extension installed as a lot as well as the live server so we're gonna use both of those make sure that's installed and then alright let's get right ready in just create the HTML markup here so I'm gonna have a header tag and I'm just gonna have a div clip div class container and this will just help i Center up this content and so we're just gonna have an a my company ID enter and it's not going anywhere okay so I just kind of wanted to have a header just with least a logo it's not going to have a navigation all right I mean we're gonna have a class of container and an h1 with the type of headline let's see what else a paragraph will have I also I'm going to use the lorem extension as well so just do a search for that if your extensions maybe I don't know 15 words so lorem 15 after that we will have let's see here just a button like a call to action button and that will be call to action very simple stuff and then finally I will just have a section and in that section we'll have our container and then we'll have an h2 an article about life or something I don't know and then we'll do a paragraph this will be lorem hundred let's just replicate this line so shift alt down arrow key a couple times and just to make them a little bit different I'll get rid of some words here there okay so now if we let's first click watch SAS on our SAS file and then we will right-click and open with live server and this is what our really ugly site looks like all right so let's get it looking how we will intend it to be by default the light mode version I guess you would call it all right with CSS so again there's not gonna be a lot of CSS properties I just want to do the setup work here so we're gonna have a body with a font family of montserrat of course I haven't installed so I'm not gonna borrow they're linking it margin:0 so let's I let me increase this just a little bit I'm gonna make sure actually you guys are cool you can see that that's good control P get rid of sidebar will do a container here and this is just going to be with 80% margin:0 auto that will Center it up I'm not gonna bother making this responsive so I just want to get this done as quick as possible so our header I'm gonna pop a background with rgba 0 0 0 I point one just for like 10% opacity and then padding we'll just do one REM unit the link inside which is the logo or just do fought weight bold text decoration is gonna be none and the color is just going to be like a purple color so 9c 0 EEE alright so let's save it so far just to see what's happening we're coming along also we will have our main this is kind of like the hero section so we'll have padding of 5 REM units on the top and bottoms you're gonna left it right background is going to be the same color as right here and then we'll also do color white for the text so let's check that out yep now we have to work on that button in a second so I will have our h1 element font size just going to make it bigger and then also our paragraph that's inside is kind of like a sub-headline so we're gonna make the font size 1.5 am units margin top zero let's check that out so far we're getting there and actually let's change margin top to like 0.5 REM units push it down a tad bit more all right and then also our call to action button so a lot of background we're gonna make it white padding will be one REM units to REM units so top bottom left right margin top will be 0.5 REM units display:inline-block font-weight:bold don't worry guys rome was done text-decoration:none and border-radius it's going to be 5 pixels all right i we we have one more rule set and that's it but let's check out the results so far just very simple ugly call to action yeah there we go and then let's go ahead down here we'll say our section we're just gonna give it padding for REM units and 0 all right so this is just an example i'll by just a very simple landing page that's all i really wanted to do although you would probably make sense to change this this button color here to our this color right here so I'm gonna take this color code and we'll change this here color to there alright so now there's our button okay so if you want to integrate a I the dark mode and do so in a very fast way then we can use dark mode j/s okay so it gives you a number of ways to get work working you can use a CDN or a content delivery network that's what we're gonna do just to make it very quick and easy or you can use you know the node package manager to install it on a more robust environment so again we're not going to do that so we'll do the CDN option we're going to come down just after we're just before the closing body tag so we pasted that and now we're just gonna have our inline JavaScript here with a script tag now when we come back here you can see that we have options now you don't necessarily have to use this you can just do this but these options allow you to you know situate where it's at the mix color the background color button color you'll see all this stuff so what I'm just going to do is copy all that and we will paste it in here so let's put that right there there we go now let's save it coming back we can now see this little circle that has shown up now if we click this tada it sort of works as we can see I it gets rid of it doesn't get rid of its changes because it's using mix color mode the CSS property and if you have colors it's going to change those colors on the areas that it's affecting and by default if it effects everything I so if you want to remedy that which you probably would if you have branding colors that need to remain the same regardless of your color mode you can tackle that in a couple of different ways so the first way is we could simply add a class as it mentions down here where you can add the dark mode activated art no it dark mode ignore so let's try doing that we're going to place that onto the main element right here so if I do class equals dark mode ignore let's save that and see what happens all right so let's I do / maximize that sorry now it it works but for some reason if you hit ctrl shift I and we select our main element they are applying a display:inline-block for some reason on dark mode ignore and I think that's to try to combat I try to make sure that isolation isolate actually works so because there are certain cases where it won't work unless it's display block or inline block and you'll see that in a second so if this happens and in adding it breaks your layout as it has done here then we could remedy that in a few different ways the first way would be simply to leave the class here and then we'll go back to our main element and just specify with a hundred percent so save that we'll go back we'll maximize and now the width is expectedly a hundred percent and now it's ignoring the parent element along with all the child elements inside in terms of having this effect effect that part specifically so we could also approach that in another way so going back let's say we wanted to remove the class we'll save that and now we can add simply isolation isolate and this will do the same thing so again it all depends on how you want I to how you want it to affect your layout or not affect your layout we can also apply it to our a element so we can put in isolation isolate and this is for our logo look if we don't want our logo to change green as well I watch what happens though it doesn't work and that's because this needs to be display:block in order for it to work so now if we try it out it's gonna work and now it's our purple color very very cool now you could also add because if we take a look at the inspector real quickly and toggle this thing on and we look at the body element right here we see a class of dark mode activated so this will get removed every time we toggle it on or off or off rather so dark mode activated as a class that we now have access to in order to change specific elements so for instance if we wanted to change that for whatever reason you wanted to change a given color eye to something else let's say we we want to remove this part isolation isolate and that means it's going to change it to that green color again if we wanted to have it affect the color in some different way perhaps we could for instance I do this we can target dark mode activated in main and then we could say background I don't know green now it's not going to be green because of the mixed blend mode it will be some other colors such as pink so you have a lot of options here in terms of how you want this to affect but it is a quick and easy way to get a dark mode toggle switch added to your site alright so once again it's a quick and easy solution for getting a dark mode integrated very quickly on your site make sure to subscribe if you haven't yet leave I'll see you real soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 17,698

Keywords: dark mode, night mode, toggle switch, dark light toggle, day night mode, enable dark mode, day/night mode, day and night mode javascript, dark light mode switch, day mode, darkmode.js, darkmode, html css dark mode, css dark mode, css toggle, mix-blend-mode, mix-blend-mode css

Id: I3DTw4dPHlM

Length: 14min 53sec (893 seconds)

Published: Wed Jun 26 2019