Dark mode toggle with Material UI | React tutorial

hello and welcome today we're going to be looking at adding a dark mode toggle to your website created with material UI all the code that I showed today will be in a GitHub repository that I will link down in the description below without further Ado let's get into it so this is what we're going to be creating today as you can see I've just got a Veet app created it's pretty much exactly as you get out of the box when you create a react app with Veet all I've added in is this toggle on top and as you can see you can click on the toggle button and we can switch between dark mode and light mode we've also changed this to a material UI button instead of the default button that was already in the code so let's have a look at how we can do this in the main.tsx file which is the equivalent as index.tsx file if you're using Create react app we've got our app set up and you can see I've wrapped the app in this theme context provider this is not to be confused with the theme provider that comes from Material UI the theme provider that comes from Material UI is being used inside the app.tsx file as you can see here we've got the theme provider that's taking a theme from this use theme context and then we've got the night mode toggle which is this component right here and then we've got the home component which is everything else and then the closing theme provider tag so let's go ahead and look at what's inside this theme context provider I've created a folder called theme and within this folder I've added in this file for the theme connects provider and here there's a few different things that we need I've set up a type which is a context type this has a mode which is string a function input toggle color mode and a theme which is a theme type imported from Material UI we then create a react context using create contacts and we assign it to this variable called theme context we put some default values in here so we will default it to light there is an empty function and a empty theme for these two this doesn't really matter because onload we will populate this with something else anyway this is just to avoid us having to have something like undefined so that we don't need to set anything up I prefer to just have something in there than doing something like this so let's just leave that as it is for now and then we've got a theme context provider which is a function component that just uses the props with children you will need to do this if you're not on react 18 from react 18 onwards you need to use this type so that you can use the children property this allows you to use the provider and pass in any children I.E your entire application and it will go inside of the provider that you've created so in here we will call on the use color theme hook and get the value from there and then apply that to the provider's value we'll take a look at what's inside this used color theme in a second and then we've created this hook here which is called use theme contacts and it just Returns the use context of this theme this means we can use this throughout the application to get the values stored within this context without having to use context every single time and import the context into that file so let's go ahead and look at what's inside this uni scholar theme so inside this hook you can see I've I've got a state variable good mode and I've got set mode and it's just use state which defaults to This Light Property and it's of type palette mode which is from Material UI and it can either be light or dark the function for toggle color mode is just a callback function which sets the mode to either light or dark depending on which one is at the moment so if the previous mode is light then it will set it to dark otherwise it will set it to light we've then got a use memo which changes whenever the mode changes and every time this mode changes we create a new theme which passes in that mode into the theme essentially changing the mode from light to dark I'm also importing the theme here so as you can see I'm importing from theme.tsx let's not worry about this for now this is for something else later but I've got this theme property and I've got palette primary this is a typical material UI theme object that you'd expect to be setting in your theme I've just brought it into this file so that I can just modify find the mode and have everything else exactly the same and then I return these three properties from this Hook theme mode and toggle color mode as we've seen in the type here that this is what we're expecting as you can see this is pretty straightforward you can tell that when you change the mode from light to dark it recreates the theme with that new mode enabled and still keeping in all of your other properties that you've got within your theme including your your palette let's go ahead and look at how we're using this so in the ad.tsx file we are calling on the theme contacts and we're getting this theme which comes from the contacts and obviously comes from this hook as well and we use that theme to pass it into the theme provider which makes a change for us whenever we switch on this toggle so this CSS Baseline property is required as part of the material UI design when you want to change the background of the application when you're switching between light and dark mode as well if you don't have this enabled then you won't actually be able to change the background of this application as you can see it's only the material UI properties that are changing so we need this to affect the entire application and then within this night mode toggle this is a pretty simple component I've got a box here with some CSS properties to just style the border of this box um I've got the mode being outputted here so light mode and dark mode so that's the property coming from the use theme context as you can see and an icon button which the on click function calls on the toggle color mode and inside here we've just got two different icons being shown based on whether the mode is dark or not so if it's dark then we show this icon otherwise we show this icon between the two important thing here is that this theme context is giving us the same value that we are using in the app.tsx file if this wasn't in a context and we just pulled the hook multiple times then we would just initialize the hook two different times and their values would not be in sync this way I can put this Knight toggle mode anywhere in the application as long as it falls underneath this theme context provider and I'll be able to modify the theme object that comes out of this theme context here so just to show you what I mean if I also imported mode from here and I outputted mode in here for example you can see that it's coming in through here and if I change it the value is changing even though these are two separate components and there you go it's as simple as that to set up black mode in dark mode within your application however if you want to take this a step further and change the palette between your light mode and dark mode then you can also use this option here instead so if I just comment this out and import this actually I need to implement this first do you get design tokens from here you'll be able to see that I can have a completely different color mode um in my dark theme from my light theme and this is used by using this uh get designs tokens function which is essentially just a function that Returns the theme object but taking in the mode as a property and having a condition to say if it's light mode then I want to return these values otherwise I want to return these values instead so you can have multiple functions like this to make up different parts of your theme object so you could have another function to return you the movie components if you want to modify that as well but in this case we're just changing the palette and you can see here we are storing the theme in the user memo again but it changes whenever mode changes and we're just creating theme with this get designs tokens instead that's pretty much it so if you have any questions then please let me know in the comment section down below I'll be happy to help out if you found this useful then please give the video a thumbs up uh subscribe for more content like this and I'll see you in the next video

Channel: ridhwanio

Views: 6,549

Keywords: Tutorial, react, coding, materialui, mui, programming, styling, theme, developer, javascript, typescript, ts, js, learning, guide

Id: Ak8ioaciYQY

Length: 8min 14sec (494 seconds)

Published: Tue Mar 28 2023