How to add dark mode in react js app with MUI toggle/switch | Material UI Design

in this tutorial we'll be looking at how to make um our app have dark and light mode this is like a a trend now and everyone should have it because especially because of um eye comfortability so that's what we'll be looking at I'll be using mui that is a material UI design um here is it this is the documentation this will be using for this tutorial so um you you possibly know of the color scheme let me get that Hollow scheme that is given to us um here so you can actually use this but I have some other flexibility I get from from mui and so I I recommend it so I'll be teaching you how to use mui that is material UI design it's for reacts mostly and I I don't think it's it's used for the other um JavaScript libraries well we'll be doing react after I'm a reacts engineer so all right so let me go back to the installation we'll Begin by installing it so I just open a new tab here and here's the installation um it's just mui.com in case you are looking for the website it's mui.com I will leave a link to the description in the description down there so mui.com and you can navigate to wherever you you want we are currently at the installation page and what you need is this first installation so you click on it you paste it in your terminal and then you hit enter by the way this is an empty react project I I have already cleared out the data here I assume that anybody watching this isn't new to react so um in the index the CSS have cleared out the CSS um the app.js is just having just this um line of text and then the app.css is clear so that we don't have any CSS interfering um I've I left the font family here so that we can have a nice looking font um up here so this is and this is just this is just what we have I'll be showing you how to use mui for this in in a bit so the installation is done now that installation is done we can close this off um our server is running so we wouldn't need the timing now anytime soon maybe this is not too much Zoom okay this should be fine now enough for us to do this um we are provided with a it's an uh sorry we're provided with the team um by mui and in that team you're able to change a lot of things like colors like um font um basically anything you need um and for you to be able to have a beautifully designed um project so that is what we are going to be employing for this tutorial and once you navigate to the dark mode section which is here this is dark mode section under customization you have everything you need I'll be making it a bit simpler for you so that you you might not need to read all the documentation so the first thing we need to do here is to import this first line and that is the team provider and create team this uses the a react context who under the hood so in case you need to react context you you might not really need to know it for you to be able to follow up in this tutorial but I'm just telling you so that you you know how some of these things are built we wouldn't be needing the CSS Baseline we need it for something else but not for this tutorial then the next thing we would need is um this and that is the palette now the palette is where the whole colors are can be manipulated so it makes sense that the mode is also inside of that right so we just copy this what basically what we are doing here is like we are creating a context hook but for this dark mode just think about it that way so you just copy this um paste it inside of the function because uh in a moment we need we need it that way sorry I didn't copy this properly so copy this I'll paste it here so it's it's pasted outside here it is done outside here but we'll be doing it inside of our own function here yeah and I would like to change this to Upton because in a moment we'll be using it to switch between dark and light mode so you don't need to know how these things are made you just need to know how to use them in your project maybe with time you get to know how they are made so you don't stress yourself trying to find out how each of these things are made just know how to use them in your project if you want to understand more on how to do this customization you just need to come back to this palette here and check how it is done you can also check out the team in here but we're focusing on the dark mode so let's not get distracted then the next thing we want to do is to wrap our project inside of the team provider so everything that falls down inside of this team provider would have whatsoever that is passed in from discrete team that we just um did here so um as usual I'll copy this line copy the line I will put it before the opening H1 tag here and then copy the the closing tag we'll copy it and put it at the end of the H1 tag here uh okay let's get rid of this all right and then we need to wrap everything inside of all right so that should be good um what are we missing or missing anything okay I have a closing tag here which was automatically added for me so um that fixes it then for the um Team here make sure you're passing the app team instead of the dark mode this is just a naming convention uh it's just for uh for us to understand that we are not only focused on the dark mode but we'll be switching between the light and dark mode in a bit no so now that we've done this this doesn't automatically apply the dark mode for us you save it you come back to a project here you still have a blank page here now the reason is it doesn't apply this theme on top of the body it applies it on top of components that is given to us by mui and one of the components that we use is the paper component the paper component sounds like a general background for everything you can also change components using that one paper background it is all similar to The Box component but we'll focus on the paper component for this project or for this tutorial so if you navigate um here you you can find it under the uh the surfaces um section here inside the component so on your own you can check that out so all you just need is to put in the paper and you have something like this both for light and dark mode so whatsoever one you choose so that's all we are going to be doing so the paper that's our what you want to do here I want to wrap the H1 inside of the paper component so paper please make sure it is capital letter if it's not capital letter it's going to not work as you want so hit enter and it is automatically imported for us on top of here yeah so normally you have to import it on top of here before using it inside of our project and I will move the H1 inside of the paper components and then fix that font formatting and save it now as soon as you save it we'll come back to our project we now have the dark mode being applied under here but we need to cover the whole page so the first thing we need to do is to get rid of the margin and the padding that comes with the browser by default so for us to do that we do an asterisks open and close quarterly brackets and set margin set margin to zero and then padding to zero these are the four stylings usually we do them at the beginning of our project but it's fine so that we get to know how everything is working inside of the project so once you save it it should take it to the edge yes now the next thing is we wanted to cover the whole page from top to bottom so we come in here and and apply now before we even do that we want to make sure that we get rid of the elevation or the shadow now to quickly understand what I'm talking about let's change this mode back to light and save it now you notice that there is some sort of line under of here now that line is a shadow we want to get rid of the Shadow so for us to do that we use um we use a property or an attribute called elevation and we set it to zero as soon as I said it to zero to get rid of this line here so save it and the line is gone so the paper component is still there but the line is gone because we've set the elevation to zero now let's get back to our dark mode here and set it to dark save it and we're back to our dark mode now for us to be able to get the whole page covered with the dark mode we need to stretch it out and so we we put in The Styling for you to style in um an mui material UI design for react you need to use the SX attribute so SX and make sure the curly brackets are two so that you don't get an error if it is just one the Styles will be applied and of course I'm getting an error already in my editor so you're adding the second one and then we put in the height Heights of 100 view heights that's what we want to do so I wanted to cover everything we are seeing you save that it covers everything you are looking at now one more thing if you look at the edges if you notice that I don't know if you noticed that at the edges of um this browser there is some sort of white edges at that corner it is because by default this has some sort of Border radius so we want to get rid of the Border radius and for us to get rid of other videos we need to add another property here called Square put make it a square and all the white edges will get will be removed so you save that and it is gone so we now have a full page that is completely dark now this is how you use the dark mode all over your project so for every page you want to render you just need to make sure that it is covered with the paper component as soon as it's covered with the paper component it now starts to reapply or change the colors on the side and that is what you have here for either dark or light mode the color palette changes automatically for you so for example for typography which is the text you change it changes back to you know white because the background is already dark um and if it is a light background then it changes back the typography changes back to you know black like this for the primary for the second round for the disabled so if you just take your time to read it up you you'll be able to find out the differences between these things so generally we've been able to apply dark mode to our project but here is the thing sometimes we want to switch between light and dark mode so how do we do this so to do this it's very simple we just need to be able to toggle between the light and the dark mode so for us to do this we need to use the use States the U State hook so come up here and then set some sort of State here so use States we make sure that we import it here so mine is automatically imported for me and then we open this up here and put in mode as a variable so mode that's the variable there and then we set it to by default let's set it to false and how to make this mode a small um alphabets okay mode now what we want to do here is to set mode the mode inside of the palette depending on the state of the mode out here so if the mode true once it's to be equal to dark ins instead of that or else I want it to be equal to light so like the next thing you want to do is to add a switch like we want to be able to switch it on or off so currently what it would be showing us is a light background here you see because we we now have um the mode to be false and if we change the mode here to be true it changes back to um to false sorry it changes back to dark but as usual I want to start with um false and then let's get the switch we should have a switch somewhere here um mui give you so gives us a switch so you just copy the switch here I'll make a few changes inside of our project so we'll paste it here and then of course make sure you are importing the switch on top of here the switch is automatically important for me up here and then for the checks we want to use the mode as the base to check if it should be true or fals so putting the mode here and then let's create a function for this handle change up here so const handle change equal to it's going to be an arrow function so open and close quality brace then we're saying that if mode is true then set mode to false else this is just a toggle else set mode to true and that is it so now that we've done this let's save and see what we've done go back to our project here now we have the switch and we can switch between the light and dark mode as soon as you switch you see how it changes flawlessly between light and dark mode so this is that that's how we switch and it's making sense right now but there's one more thing and this is why mui is actually perfect for the project sometimes you want to use the persons or the clients or maybe the users um system specification so by default many people's system are in that mode so how do you make sure that you give them exactly what they want so that they don't have to switch between the light and dark mode every time they want to use what they are comfortable with now that is something that is very unique and we can get that all from mui so if you scroll down down to like the bottom of um the page here that is we are still in the dark mode page there is what we call the use Query hook here that helps us to um it helps with the dark mode of course but it also helps with things like um sizes of of our web page or sizes of device so that we're able to determine the size of a device and then render appropriate content according to size of device but for this project we'll be using it for just the dark mode uh sorry light and dark mode switching so the first thing we want to do is make sure that we import it at the top like this so copy it here and paste it here in our import so we've imported it now the next thing we want to do is to copy this line and paste it at the top here paste at the top basically the line is saying um that use the preferred color scheme of the person's system if it is dark you set it to dark something like that so that's just it like I said you don't need to you don't need to overly understand what's going on um under the hood you just need to know how to use it in your project as time goes by you clearly understand how these things are used you notice that these things are basic react use Query is react to use state is react hook um create theme is react contact so there's really nothing extra that's going on here all right so now this gets whatsoever is inside of the person system settings and puts it up for you here so what you would do now is to copy the preferred dark mode copy it and paste it into this place that is the use stage so see this way it is checking if the user prefers the dark mode so if it prefers the dark mode if the user system prefers dark mode then it says the prefers dark mode true if the user do not prefer the dark mode then it says this to false and so automatically our mode will become true or false depending on the person's system specification makes sense all right so by default now whatsoever is the person system specification we get it to be used in our project so when you save this of course my own system specification is that it automatically shows us stack here just to show that this is working let's change this to false you save it it is showing us the light mode and of course we can switch between but we want to start on the person's system design or the user system specification so that's why instead of putting false here we put the prefers dark mode here and save it and automatically it switches back to dark mode as always anytime you choose to um to refresh this page it will always be in dark mode but at the time when it was using our own no values here that will send it to false if you set this to dark and refresh the page it goes back to light but this is the beauty of using the person's system specification you save it to that then it will always be at the person system design anytime you decide to refresh it here you can switch on and off anytime you want and that is how to make dark mode in react using mui the full code is here um I'll upload uh this code to GitHub just in case you want to get a clean code for your project I'm sure you you might prefer this to get going into the documentation but if you want to get more out of this you need to go into the documentation and um read up as much as possible there's a lot that mui offers us and I've been using it for very big projects very complex project and it's been working perfectly um dark mode is is the in thing now and we all want to have a share uh to give our users the best of experiences so thank you for watching um please hit the Subscribe button and like this video and share so as many people as possible um especially those that will benefit from it please share it on social media and I'll see you next week in another tutorial um for for this tutorial we didn't use um the use context hook if you'd like to see and how to use the use context hook in this um let me know in the comment section if I get plenty of comments and get plenty likes for this video I'll consider doing the use context version of it so thank you very much I'll see you soon

Channel: Njoku Samson Ebere

Views: 1,160

Keywords: html, web, react, reactjs, tutorial

Id: U1ehcU6loYI

Length: 19min 59sec (1199 seconds)

Published: Thu Sep 28 2023