How to make Light and Dark Mode For Website

hey everyone and welcome back to daily tuition in this tutorial i'm going to show you how you can convert this one page website template from light to this dark mode we are going to create two different modes for this webpage light and dark i'm going to show you how you can convert this light mode into dark using css so let's get started and see how to do it so i'm going to open the vs code editor and i'm going to toggle the window on the right side here i have an empty folder inside this folder i'm going to create a new file i'm going to name this file index dot html then i'm going to create style.css file in the index.html i'm going to first create the exclamation mark and press tab to create a simple html5 snip it something like this then i'm going to change this title to modes and link the style.css file using link tag just add that inside this body here i'm going to create a container inside this container i'm going to put all this code so inside this container here i'm going to first create a one heading tag and then specify title here one page website template now because we have the template string on the next line let's add here a break statement like this and now let's execute this file so i'm going to right click here and say open with live server i already have live server installed in my vs code so i'm going to open my index.html in the live server you can see here now just add that to this h1 heading tag i'm going to specify some classes so i'm going to first specify here text center to center this text to align this text center and then i'm going to specify primary dark so this will specify text color to this h1 heading tag just out of this h1 i'm going to create a spandex and i'm going to specify name to the spawn tag we are team of designer so i'm going to specify this text here and then i'm going to specify class here which is going to be secondary dark that's it save this file so we have the spawn tag here just out of this spawn tag just down here i'm going to add here input and this is a type of checkbox now you can notice here in my finished website i have here a toggle button i'm using a check box here to create this beautiful toggle button so i'm going to add here a check box so i'm going to add input type check box and the id is going to be more using this id we can easily access this input text box just out of this input text box i'm going to create gray system so i'm going to add here grid then i'm going to add my first grid item something like this to this first grid item i'm going to specify bg light class to specify background color to this first grid item inside this first grid item here i'm going to create my flex so i'm going to say here flex and inside this i'm going to add icon you can notice in my finished website i have a type of grid and inside this grid i have this icon title and a description so let's create this so inside this icon i'm going to put this fingerprint icon so i'm going to add here so i'm going to add here spawn tag and inside this i'm going to say finger print when i save the changes back to my website i'm going to get just a title fingerprint now what i want i want to add fingerprint icon in my project so i'm going to open a new tab in my browser and here i'm going to search for material icons i'm going to search for material dot io and right from here i'm going to grab these icons so i'm gonna click on this git repo copy this link tag and paste it before this style.css just like this save the changes back to your website and just down here you need to add a class call material icons something like this when you save the changes you can see you're going to have this icon in your website just out of that just out of this div right down here i'm going to add h2 heading tag and i'm going to specify title here fingerprint scanner that's upon you you can specify any title that's completely fine then i'm going to specify class here primary dark keep in mind i'm using this class to specify text color to the html element just for that here i'm going to add a paragraph and inside this paragraph i'm going to grab this code and put that here like this and then i'm going to specify here class secondary dot that's it say the changes so this is my first grid item just for that i'm going to minimize this item my first grid item copy it and paste it something like this and instead of this fingerprint icon i'm going to put here dashboard so this will add dashboard icon you can notice and then i'm going to change this title and here i'm going to put grade system save the changes this will create my second grid item let's copy it paste that again and then change this title and this time i'm gonna specify icon here done all so this will add this icon and i'm gonna change this title to everything ready save the changes this is how we can create this simple web page using just an html now let's add style to this webpage and add two different modes to it so we're going to back to the style.css right here i'm going to first add the font family you just have to back to the font.google.com the previous icon website and click on the browse fonts right from here you can choose poppins font and i'm going to select the regular 400 style and import this link inside my project inside this style.css file something like this and just sort of that i'm going to specify this font family to all my elements so i'm going to first select all the elements and select all the descendant html elements and then specify here font family pop-ins as well as i'm going to specify cursive fallback value save the changes and as you can see i'm going to have this poppins font family to my text now just out of that let's create some variables so just down here i'm going to select the body and inside body i'm going to create few css variables so to create css variable just pass two dashes then specify the name text light so this will create a css variable with the name text light and then i'm going to specify rgb a color here and inside this rgb a color i'm going to specify different values like this just for that i'm going to create the primary dark color as well so i'm going to create a variable called primary dark and then specify here rgb a color and inside this rgba color i'm going to specify value to create dark color so this variable is going to allows us to access the dark color just for that let me create three more variables inside this body something like this so we have a secondary dark bg light and vg btm so once we have all these variables just after that inside this body let me first specify the background color so let me first specify here css style to this body so let's create here background color which is going to be the light color so i'm going to specify here var the function name and then to access the variable you need to add the variable name so i'm going to say here text light using var function we can access the css variable save the changes so this will add light color to this background just for that let me remove margin from the paragraph i'm going to select all the paragraph and remove margin just down here i'm going to select my container something like this and to this container i'm going to specify display flex then specify flex direction which is going to be column justify content center and align items center so this will just center all the content yes out of that i'm going to specify here margin zero so this will remove all the margin from this container just on that let me create text center class to center all the text so this is going to specify text align center so using just this global text center class we can align all the text to the center so we already have this class to my html element you can notice here now just start that let's create a grade so i'm going to create here a class called grade and then i'm going to specify here display grade then i'm going to specify create template columns and i'm going to repeat only one column mean max is going to be auto 320 pixel so the maximum size of the column is 320 pixel save the changes so this will just specify the maximum size to the grid item just out of that i'm going to specify row gap row gap is going to be 2 am and column gap is going to be 3 am as well as i'm going to specify top margin from top and bottom margin so i'm going to add margin 3 em to the top and bottom like this just down here i'm going to select the flex class this one or i can simply specify here grid flex so inside this flex i'm going to specify display flex flex direction is going to be column and align items is going to be center so this will center all the text just out of that i'm going to specify here padding i think is going to be 4 em to the top and bottom and 0 for the left and right save the changes just are that once we have padding let's select the icons so i'm going to select the grid first and inside that we have icon the icon class and inside that we have the smart app let's select that so i'm going to select this responder of this icon division tag i'm going to select this and then space over here font size for em this will increase the font size of the icons and then i'm going to specify here color which is going to be bg btn just out of that let me create some global classes so i'm going to create here primary dark so i'm going to space over here color primary dark then let me create here secondary dark color so i'm going to say here secondary dark color is going to be secondary dark something like this save the changes just add that i'm going to specify here bg light we already have this bg light class to the element so i'm going to say here bg light then specify background color is going to be bg light so using this bg light class we can specify this bg light color to the html element then i'm going to specify here box shadow box shadow is going to be 1 pixel 5 pixel and then i'm going to add here rgb a color like this save the changes so this will add box shadow to this grid item just for that let me center this paragraph you can notice here this paragraph we have secondary dark color if i specify here text center then i'm going to have my paragraph to the center so let's add this text center to this paragraph so i'm going to add this text center class to all these items something like this now just for that at the end let's create this toggle button i'm going to grab the toggle button code from codepen so i'm going to put a link here so you can easily see and grab the code from the codepen website so just click on this link and grab the toggle button code from this codepen website so what we are going to do is we are going to first select the input tag of the type check box and to this input tag i'm going to specify position relative width is going to be 80 pixel height is going to be 40 pixel and then i'm going to specify here border radius 50 pixel and outline is going to be none now when i specify background color to this input text box so if i specify here yellow color when i save the changes this will not do anything it's going to just add width and height but what i want i don't want default appearance of this input type checkbox i want to hide this default checkbox appearance so to do that here i'm going to call webkit appearance none so this is going to remove this check box and add all these properties to it when i save the changes you can see this will remove that border and add this border radius outline width and height and this background yellow color just sort of that let's add before content to this input type checkbox so i'm going to copy this paste it down here and now let's add here sudo selector call before something like this so using this before i'm going to add content inside this before sudo selector so i'm going to first say here content content is going to be now so i'm going to pass double quote here then i'm going to specify here position which is going to be absolute then top is going to be 0 and left is going to be 0 then i'm going to specify here height which is going to be 40 pixel and width is going to be 40 pixel save this changes and then i'm going to add here background color is going to be primary dark when i save the changes you can see i'm going to have this box inside this yellow check box i'm gonna just paste over here border radius 50 pixel now once we have this toggle button just down here what i want when i click on this toggle button i want to move this a black dot or you can say this button to the right side so to do that i'm going to grab this input checkbox selector like this and call here an event check so this event is only going to happen when we check this check box so when we click on this check box this event is going to happen and then i'm going to call before sudo selector something like this and what i want i want to move this before selector to the right side when we click on this check box so i'm gonna specify here transform translate 100 percent and now when i click on this checkbox you can see we can easily move this before pseudo selector using this translate property so what we have done here we just selected the input checkbox then when we click on the check box i'm going to select the before pseudo selector and then specify translate 100 to this selector now once you've done that save the changes and now instead of this background yellow color here i can use images so i'm going to copy image link and specify that here instead of this background color something like this so as you can see i'm gonna have here in background image so let's specify background color to it background size is going to be cover as you can see i'm going to have this background image to this toggle button you can see on the right side here i want the night mode and on this left side i want day mode so to do that i can simply say here input type check box colon check and then i'm going to specify background image here so i'm going to grab the background image code and then specify that here so i'm going to just simply grab the image url and specify that to the background image don't worry you can grab all this code from this link so when we click on this button this is going to convert this template into dark mode and when we uncheck it this is going to convert this template into light mode now once you understand how you can make this beautiful toggle button let's add light and dark mode to this webpage so when you click on this toggle button i want to convert this light mode into dark mode and when you click on this toggle button again i want to convert the dark mode into the light mode so to do that you have to just add a dark class to the body section of your website so just scroll up and just after this body right down here i'm going to add body again and then add a class called dark what you have to do is you have to change values of these variables when we add dark class to the body for example let's copy this text light variable and now what i want when i have dark class to this body i want to convert this text light into dark color so i'm going to grab this dark color this primary dark color and specify that here i'm going to override this variable we're going to convert this previous value with a newer one so we're going to convert this light value into dark when we add dark class to the body i'm going to do the same to all these variables so i'm going to grab this primary dark put that here and then i'm going to specify light color to it so i'm going to grab this light color and specify that here something like this and what i want i want to specify here alpha 1 so i'm going to specify that so i'm going to do the same to all my variables so let me create a few variables here something like this so again notice to the secondary dark i'm going to specify light gray color you can notice here then to the bg light here we have the gray color but when i add dark class to the body i'm going to specify this yellow color to it so this is how we convert all these variable values into different colors now let me see the changes and now what we need to do is we need to add click event on this check box so when we click on the check box i want to add dark class to the body so we can convert this light mode into dark let's create a new file inside this tutorial here i'm going to specify filename index.js this is going to be the javascript file and inside this file i'm going to create and access this input checkbox so to access this i'm going to grab this mode id make sure you link this script file to the index.html so before the closing body i'm gonna add here script in the source i'm gonna specify index.js save the changes back to the index.js here i'm going to select the toggle button so i'm going to say here select toggle button and then i'm going to say let toggle is equal to document.getelementbyid and then i'm going to specify here id mode so i'm going to select this input checkbox using this id just add that just down here i'm going to create on click event so i'm going to say here toggle dot add event listener and then i'm going to say here click so when we click on this toggle button or you can say when we click on this check box i'm going to call this click event and call callback function here something like this if you want you can create a dedicated function as well i'm going to create inline callback function and inside this i'm going to say document dot body dot class list so this is going to return all the classes and then i'm going to say dot toggle in the single code i'm going to say dark so toggle is going to add and remove this dark class from this body element let me save the changes and show you the result now when i click on this toggle button you can see i'm going to have the dark mode oops i think i misspelled something yeah right here i used bg light instead of bg light i'm going to use text light let me save this and now you can see a light mode is now converted into dark mode when i click on the toggle button again this is going to convert this dark mode into light mode you can see how easy it is to convert this web page into light and dark mode you can see the changes over here to this body tag if you have any question about this video don't forget to comment me down if you find anything useful don't forget to press the like button share this video with your friends subscribe for more latest videos that is all for now i will see you in the next one [Music] [Music] you

Channel: Daily Tuition

Views: 2,317

Keywords: How to make Light and Dark Mode For Website, light mode, dark mode, website modes, working with website modes, website demos, website themes, light and dark mode of website, website dark mode, how to convert website into dark mode, convert website from light to dark mode, css dark mode, html dark mode, dark mode website, how to make dark and light mode website, website

Id: 8YwxGhnyHR0

Length: 22min 44sec (1364 seconds)

Published: Mon Dec 06 2021