Light / Dark Mode Toggle In React Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be showing you guys really quickly how to implement a functionality where you have kind of like a a light mode and a dark mode inside of a react application so in my opinion this is way simpler than a lot of people imagine it is um so i thought it would be a quick good quick video for me to make for you guys so i have this demo over here of basically what we're going to be building um we're not going to be building the ui like the stuff related to like this form over here this is just a a random react website that i found on codepen i'll leave the link for it in the description if you want to none of this is functional but um it's just a some sort of ui template that i'll show you guys how to easily toggle between being on light mode and then being on dark mode so for example i'm here writing something i'll put uh pedro attack as the username and when it turns into dark mode you'll see that all the elements over here kind of change um to more to a more dark tone you see this in many different websites i know youtube google all of those websites have something like this um it doesn't have to be the same color scheme as i'm using over here you can search online different color schemes um the main purpose of this video is just focusing on the functionality itself so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] okay everyone so in order to make this video i want to actually um show you guys how to implement this on an already existent website and the reason for that is because um i think a lot of you guys who want to implement this feature i already have some sort of project in mind or some sort of project or a website that you've been coding and you just want to add this picture to your project um but if you don't uh if you are creating from scratch it should be similar so um i wouldn't mind that much about it but as you can see we already have this little website which as i mentioned i got from a codepen which i'm going to be linking in the description together with all of the code in this video and the code pen basically generates this application over here which is just a form it's pretty simple if you go over here um our react application starts with an app component which just calls a form component and the form component is just a simple form um with like a username input a password input um like a forgot password text over here it's pretty simple nothing is functional because it's not the point of the video the point of the video is just showing how to change the ui based on if you're on light mode or on dark mode so one thing you might have noticed is that i have this thing called light over here now this is an id and one the way i like to do this light mode and dark mode functionality with pure react not using any libraries is by actually creating an id or you can use a class as well but i'm going to use an id on the higher most div inside of your application so this one will be our app div over here every div inside of this will be now every div in our application will basically exist inside of this now the reason for that is because we want to impact all of the the website at once based on a single comp a single element right so we're going to style it based like this right now we are on light mode but if we wanted to go to dark we could just change this to dark right um but how exactly would we um make it so that when we click on a toggle something like that happens well let's first um just start setting up how the project will look like well the first thing we need to do is we need to create some sort of context because i'm going to be using the context api in this video where it will allow us to pass on the functionality of switching and toggling throughout your whole application not only that but you can also pass in which mode you're in like a state determining which mode you're currently in and you can access that everywhere in your app and we do that by using the context api so i'm going to come over here i'm just going to say export const theme context we're going to call it theme context and we're going to create a context like this now if you don't know what the context api is i do have a video about it really quick a 15 minute video and if you want to check it out you can check it out um it's really important so i would i would recommend watching that first but um in order to do this we need to import the create context from react like this and then we created our theme context which actually won't be light initially it will start as no so we'll grab this context and we'll just wrap everything inside of here around with the provider right this is what you usually do with uh the context api and inside of here this is where all of our application will exist the reason for that is because inside of this theme context we're gonna pass in a state called theme and this state will determine which mode we're in so it'll basically be either a string saying light or a string saying dark depending on which one it is at the moment will determine if the website is on light mode or dark mode so in order to pass this over here we can technically just give a value to this and just pass both the the theme and the set theme function and everywhere in our website we could technically change this to to determine which theme we're in but instead of that i'm gonna actually create a function over here called toggle theme and we're just gonna pass this function instead of both the theme and the set theme um so that whenever we want to change the theme uh change from dark mode to light mode or from light mode to dark mode we just call this toggle theme function and it should work so i'm gonna say set theme i'll grab the current theme like this and i'll say that uh i basically want to make um the current theme be equal to um the current if it is light so we're going to do some conditional operations over here we're going to say if the current theme is light then i want to set the current theme to dark if it is dark so if it's not light we'll set it to light um this logic over here is just toggling between one another depending on which it is right now and instead of passing both the theme and the set theme we can now technically just pass a toggle theme and whenever we call this function in any of the components inside of here um it will work perfectly for us now the reason why i set this up and i won't be using this is just to to point out that if you want to do something with the context api if you want to access this somewhere else inside of your code you would do it this way so now that we created our theme state and we kind of have a function which can toggle between one another we want to start implementing how will the css change based on the state well if you've used react before you know that you can technically like just add a style tag over here which allows you to easily add css um but depending on some sort of condition or some state but this is not what we're going to be doing because you want to impact a lot of different elements at once and by doing this you would have to add a style tag to each element individually or just not have really customizable control over your styling right now the way i like to do this is as i mentioned i'll have this id which it won't be just light it will actually be whatever theme we are in right now and when we open our css you'll see that i implemented this little statement over here which basically says if the element with id light exists then set the background color to the the light version but if it is dark then set the color to the dark version so we're technically going to write our css for whatever elements we want to change twice and i know that's a good amount of work especially if your website is big but um you can make that easier if you use reusable components which is what a lot of people do um and with the time you'll get the hang of it i'll show you guys exactly how we do for a lot of elements but the most basic one is just changing this background over here you can see that currently we initialize our state um as light right so you can see it starts as light but if we set it to dark you'll see that this id will change from light to dark it will go to dark as you can see over here now i want to point out that it does look ugly because it's changing all of it to dark which is not what we want and this is where we start doing more of the customizable stuff so what do i mean by that well we have the background white right but we want to make this little card over here be some sort of color when it's dark right so i'll set this equal to dark initially like this and what we can do to make this dark is we can come over here and just search for what element is representing this piece over here so we know that in our form over here this is the uh the element with the class name main so main represents this little box over here so what we do is we come to our css we go to the main part over here which is um right over here we say main right and right below it we just say hashtag light like this and we access the main class right so whatever styling i put inside of here will be the styling for the main element when it's in light mode so i can say something like the background color when it's in light mode it will be hashtag fff which is white but if i want to make it on dark mode which is what we need right now because um it's it's not fitting well in dark mode we need to add some styling to it we'll just change this to dark and we'll see that the background color will be something like this over here um this is the background color that i put in the beginning of the video and you see that it actually um fills out this specific bar now we can change it again back to to light and you'll see that it will be back to how it was before now i hate having to switch back and forth so i'm going to implement the toggling functionality real quick but i just want to point out that the main idea of switching and adding the styles for each of the modes is basically done all you do now is you go for each html element that you want to specifically target some sort of caller and you add the the mode first and then the element the reason why this works is because the mode will be the uppermost like the highest level div inside of your css so this is kind of the idea now to add the switch what we're gonna do is the following we're gonna first install a package called um react switch now you can create your switch however you want it's like a toggling switch i like using this library um it's pretty cool you just say react switch like this and press enter if you're using npm you can use npm install react switch now i already installed so i'm gonna remove this and this library is it's pretty cool it basically just gives you a very simple switch now to get the switch we're just going to come over here at the top say import react switch from the react switch library then copy this this is just a component so i'm going to put this right inside of the the main div or the the app div over here right below the form um you can put it wherever you want your website a lot of people like to put it up on the navbar but you can see um it is inside of here right it looks pretty nice and it you can toggle around it um although right now it's not doing anything so it's kind of glitching um because we haven't put any functionalities to it yet now one thing i want to do is i want to add some styling to this switch so i'm just gonna put this over here and say that the class name is um probably like switch like this and save this now the reason why i'm adding the styling is because i actually already did a styling for this as you can see over here um i just centered it and i found that it would look good if i did um but it doesn't matter it depends on what you're doing on your website now what we have to do is we'll come over here to our switch we'll give an unchanged to it and what we're going to say is whenever you toggle the switch we're going to call the toggle theme function and we also need to pass a default checked value so when the toggle switch is checked it just means that um the theme is equal to dark now if it's unchecked it will be the opposite so it's not equal to dork now what we can do is you can see that by default because we made the the theme start as dark it will be set to chuck but if i toggle it it will become light and i can keep toggling and it will keep changing now we only edited two different elements inside of our page the background and this one over here right but you can see it's already working it's already fitting with the correct styling one thing i want to do as well let's just add a little label over here which will say something like depending on whether or not it is which mode it is it will show the name of the mode so for example we'll say that um if the theme is equal to light then we're going to display a label um say light mode else will say dark mode and you can see that as i toggle it it will keep changing this to light to dark light to dark right now i don't like the color of this because on dark it becomes dark and on light it becomes it's still it's good on light but i want it to become white when is dark so how can we do something like this well you just follow the same procedure i mentioned previously you go to your css you come down and you add something like this i already obviously wrote this code but you just add light and add the the color of when it's light and dark and you add the color of when it's dark so it perfectly matches now now i'm gonna add the code the css for all the other styling over here and just go step by step if you're interested it's basically done the video because the the idea behind it i already shown so um i'm just gonna go over all of the final edits that i need to make to make it look like what it looked in the beginning okay everyone and as you can see now it's working exactly how it was in the beginning of the video the only css i added was this over here so i went through every single piece that i needed to to add to fix the the lighting so for example the sign page over here the problem was that this text was this color even when it was dark which is bad because it it blends in pretty badly if it's not white so what i did was i just came to the side the sign element and i just added a light and dark css for each of it so you do this for all of them i did the same thing for um the little texts over here because it is white um it keeps changing right it becomes a different color and you can see i did this by just adding a dark functionality and a light functionality for both the username and the password now this is basically it again the code for this will be in the description this is kind of a different format of a video i'm trying it out because i basically didn't write a lot of code in this video i wrote the code beforehand but i tried to explain it this way because i felt like it would be the best way that i would understand if i was trying to learn this topic if you liked the video leave a like down below and comment what you want to see next subscribe because i'm posting twice a week and i'll massively appreciate it and yeah that's basically it really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] you

Channel: PedroTech

Views: 90,498

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, dark light mode css, dark light mode react, dark light models, react dark mode switch, dark mode, freecodecamp javascript

Id: VzF2iTTc0MA

Length: 16min 2sec (962 seconds)

Published: Wed Apr 13 2022