How To Create Dark Theme Switcher For Website Using CSS and JS

so today we are going to make this theme switcher so as you can see that now we are in the light theme and we have a nice card here and let's switch to our dark theme and there it is we are going to make this in this video hope you guys will like it so no more talk let's dive into it so today is the second day of our 30 day 30 submits and for the second day we are going to make this theme sweeter and if you are interested to check out all the days submits you can check out the repo i will link it in the description so you can check out all the submits that i did in this 30 day 30 submits challenge so here as you can see for today we are having this and here is my html and css and javascript all are empty and in our html first of all let's get the layout so so first of all let's have a section and inside the section i'll have a deep with the class of container so here in this div let's have a h1 so basically i'm making a card for the layout only so for this one let's have a this is a title something like that and for the pregraph i will have warm ipsum about 50 and that's it for and also let's have a button where i will say hello and so let's have our themes which are div where we will have the theme switcher so before our closing body tag i will have the div here so it will be d with a class of thin switcher switch something like that and here i will have a input and the input type will be the checkbox okay and also we will have id which is the switcher and let's have a level here after the input and for the label and in the for we will use switch which is the id for the input so switcher and for the level text i will use something like anything you can use so that's it for our layout and here is our theme feature and here is our layout or content so it's basically just a card for now and let's link our style sheet here so css and also here the javascript so in our style let's come to the style and let's have a basic style for universal selector so padding will be zero and margin will be zero and box sizing will be the border box so that's a basic style that we will have and after that let's have our colors so we will have something like two kinds of color for our two themes first one will be the light teams and second one will be the dark themes so let's say that light theme color and here we will have our light theme color so it will be some variables so we will have the variables inside our body so body and here we will have our all the variables for only the light team so let's it will be color one so i will have four colors so let me just copy and paste the variables so as you can see i have four colors color one color two color three and four and all are variables and i'm just having this random white color i don't know why the two and three is same so let's see make it something like that so and also here in our body let's have a attribute here so it will be something like which team we are on now so as you see that we are making the light theme color scheme so that's why we need to make something like data.theme will be light and we will set this data theme attribute inside about this body with our javascript so that's our light theme and also let's get the dark theme colors so dark theme colors and here we will have our dark theme colors so here in the body we will have the same data attribute which is the data theme and for this one i will have dark and whenever our data theme attribute will be dark we will use our another color scheme so just let me copy the color scheme for you and paste it here so that's the colors that we are going to use for our dark theme so we need to make sure that that are the same variable as you can see so basically what we are doing is when i am in the light theme we will use this white color scheme for the this colors variable and for the same color variable when we are in the dark theme we will use these colors which is our dark colors so that's what we need for this color scheme and let's style our body so first of all let me open it with the live server here so let's tell this and here first of all in our body so board b so let's say that font family that we want is monsterat monster rat i already installed this monster art so i don't need to add it and the color for our body will be the color 4 so color 4 so as you can see now we have this monster art font here let me make it something like that so here after the body let's come to the section so in our section let's have something like background color will be color one and mean width or min height actually 100 vh and width will be 100 percent and display is flax and align items center okay that's fine also sure that you have justify content also center so it is now in the center as you can see so after that let's come to the container and say that here the width will be about 90 percent and margin 0 auto and also background color so let's have a background color it will be the color 2 so here it is the white background we will have so we can't see it so we can't see our the section background color because as you can see the section background color is the yellow types color sorry blue types color so we can't see it because in our body we don't have this data light so let's have this data light so what i'm doing is by default we will have our theme which is the light so let me set it here so data theme will be the light so now as you can see that it is applied here and we are having our colors so looking good as you can see now we are saying that our data theme is light and we are using this color scheme but whenever we will set it dark we will use this so we will see it later so here in our background color after the background color let's have a border radius of about 8 pixel and also padding something like 20 pixel that makes with give it a max width of something 500 pixel so looking good not bad perfect so after that let's style the h1 which is the title so font size will be something like 30 pixel and also font weight 500 and make the text transform uppercase so that's the font as you can see it is not uppercase because we did mistake here it will be h1 so it is looking good after that let's style the program and margin top will be something like 10 pixel and font size will be something 16 pixel yeah looking good and font weight 500 and lighter spacing starter letter spacing one pixel about and line height 25 pixel yeah perfect for now and after that let's come to the button so in the button what i will do actually i will have background color which is the color 4 so we have this blackish color for the background and let's have padding 10 pixel and also 30 pixels and border none and font size 24 pixel and text transform will be uppercase and the color will be colored too so looking good so after that let's have our border radius here and 4 pixel perfect and margin top something like 20 pixel yeah perfect and make sure that you have the cursor pointer so that's it for our layout we have this nice layout if you can see that so it is looking good and also it is looking good for our small device yeah perfect so now let's make the theme switcher here so after that here let's have the theme switcher and grab that div and here let's say that position will be absolute and also right will be zero and top will be zero so now as you can see that there is our theme switcher so let's say that from the right it will be 30 pixel and from the top it will be 10 pixel or something like that yeah perfect in place so after that we need to hide this box checkbox here as you can see we need to hide it so we can hide it easily so let's say that the inputs we have only input this one in our website for now so we can grab it with the input only so just say that width will be zero and height will be zero and also say that visibility will be hidden so now as you can see that we can't see it and it is completely hidden so after that let's have our level so for the level so we need to hide this level or we need to make something that will hide or that will remove from the skin this text so how we can hide this text from our screen so let's say that for we can say display it will be block and we can use text indent so text indent here so we need to make a very large number something like 9099 pixel something like that so as you can see that it is now completely hidden from our screen because we have this large number of 9999 pixel so after that let's have our height and width so height will be 30 pixel and which will be about 60 pixel and let's give it a background color which will be a white color so make it something like that so that's our toggle here so after that let's have a border radius so border dash that i want is 50 pixel and that's it for now so we have this and after that let's have the ball for our theme switcher so it will be a soda elements of this level so stored elements after and here let's say that position will be absolute and the content i want is the nothing and let's make the width so it will be 20 pixel and height also 20 pixel and border radius will be 50 pixel we can't see it because we don't have any background color so let's keep it a background color so it will be a background color something like black we still can't see it because we don't have any the position for it so let's position it so from the top let's say that 50 percent and i want this in the left 5 pixel so now as you can see that it is perfectly in the center and if you also want you can do something like transform here translate x so to translate y minus 50 so it will make sure that it is in the center because we are using the position of absolute here so we need to make the band's element which is the level position relative actually so position to tip and now it is okay as you can see so after that let's have the background color so let's give this background color something bluish something like that so after that let's have the check so let's say that whenever i will click it what it will do actually it will check the mark as you can see that that's a checkbox so whenever i will click this checkbox means this theme switcher it will do a check for the checkbox and whenever i again click it will remove the check from the checkbox so we can do defender style with the status of this checkbox so before that let's make the pointer cursor here so cursor pointer so now as you can see that we have this hand not here sorry we need to make it here so perfect and let's have the style for our whenever we will check it so here let's say that input if it is checked i want to grab the level and say that background color will be something blackish so let me copy the color and paste it so here as you can see that whenever i click we have now this blackish color so working perfectly so whenever i am clicking it is doing the input checked and whenever i am checked i am making this level background color this black color and also let's have a border here in our this level so it will be two pixel solid and white so as you can see we now we have this border so and also let's change the color of this ball here so what we can do actually that's the after what we have so level if it is checked actually not the level it is the input sorry so if it is check we will grab the level after after and here in the after all i will say that i wanna change the background color for this after means the ball so it will be something like white so let's check it so whenever i click it now the color of the ball is white so the last thing that i need is i want to move this box or this ball from here to the right so to do that i can say that whenever i am checked i wanna make the position left in the hundred percent so now if i do this as you can see that we moved hundred percent but it is out of the our box so we need to make a simple calculation here so calc which will be 100 minus with 25 pixel so the width is actually 30 pixel and we are having 5 pixel left that's why we need to make 25 so 30 minus this 5 whatever it will be it will be here and we will make minus in here so now it will be perfect as you can see that it is in the perfect place and whenever i click so the last thing that i need is the transition so let's have the transition so i will have something like transition here in our level after so transition will be 0.5 second and ease so let's see as you can see that the movement of this ball here it is now a lot smooth and also have transition in our level so it will be for only the background color so now as you can see that we have this smooth fillings here so now it is done as you can see it is looking good and the last thing is we need to make the change of this light to dark with our javascript so it is very very simple so first of all let's grab the input so constant input will be so basically the themes which are that i want so document dot query selector and i want the theme switcher and i want the input inside our theme switcher so we have the themes which are here basically the input and what i want is i want to add even listener in our input so add even listener and i want to see the change so whenever we have any change of the value in our input we will call a function which is this one and here what i will do actually i will check the status of the checkbox so how can we check so we will check this with our if statement so if our target means this input is checked already so checked so if it is checked we need to move our theme to the dark so for that i need to change this data theme to the dark so how we can do that so let's say that document dot body dot set attribute so we have something like in javascript set attribute and the name of the attribute is the data theme and the value that i want is the dark yeah and if it is not checked what i want is i want to have the light thin so just copy and paste and make the dark to light so now it should work whenever i click as you can see that now we have the dark theme and the color scheme in our dark theme is using our this one as you can see here this one so where i'm saying that color one is this background color which is we used in our background color and we just basically making a dark color scheme and we are using it here so that's it as you can see we have a perfect color switcher means our color theme switcher so which is looking good as you can see and also it should look good in our mobile so if i go to the iphone x already as you can see it is looking good awesome actually so that's it for this video i hope you learned something so if you like this kind of video please subscribe my youtube channel because i upload this kind of video this kind of website related or web development related video so i hope you will also like those video so please subscribe the channel and stay tuned and my name is arfan and i will see you in the next video till then bye bye [Music] you

Channel: WEB CIFAR

Views: 3,001

Keywords: dark mode, night mode, dark light mode css, dark light mode, dark light web design, dark light mode ui design, ui design, dark light css switcher, css toggle, css switcher, dark light toggle, css, javascript, webdev, app development, lesson, tutorial, html, js, frontend dev, frontend tutorial, light dark mode, theme switcher, css tutorial, css theme toggle, create dark theme for website, dark theme for website

Id: D1yg4T37qYo

Length: 22min 19sec (1339 seconds)

Published: Wed Jul 22 2020