WEBVTT 00:00.000 --> 00:00.270 Okay. 00:00.270 --> 00:02.010 What are we going to do in this lesson? 00:02.040 --> 00:06.330 Well, it's a bit of a challenge, actually, because we want our user to be able to choose between 00:06.330 --> 00:08.490 dark mode and light mode to their preference. 00:08.490 --> 00:13.530 And we're going to add a couple of icons where we'll have a single icon they can click on, or an icon 00:13.530 --> 00:16.650 button to be more specific that they can click on. 00:16.680 --> 00:19.740 That changes the theme to dark or light mode. 00:19.770 --> 00:25.500 Now, earlier on, we took a look at using the Usestate hook that's going to be useful and the button 00:25.500 --> 00:30.270 is going to be located on the navbar, which means we're going to need to pass down properties or props 00:30.270 --> 00:34.560 to the child component of, well, the app dot TSX. 00:34.560 --> 00:42.720 So the navbar is where they click on the button, and then that state gets passed up to the app component 00:42.720 --> 00:44.430 in order to make the change. 00:44.430 --> 00:49.890 Now if we go back and take a look at our app component, there's a couple of things I want to set up. 00:49.890 --> 00:55.650 First of all, before we embark on the challenge, because just to make a few styling improvements to 00:55.680 --> 00:57.270 the background of our app. 00:57.270 --> 01:02.280 And I also just want to show you where the buttons are going to be located as well. 01:02.280 --> 01:08.120 And the challenge really is to convert what we have here into something dynamic, the user can click 01:08.120 --> 01:14.960 on and pass something down to the nav bar so that they can make the change using the button in the nav 01:14.990 --> 01:15.590 bar. 01:15.620 --> 01:18.980 But let's just set the Or hardcode the things in place. 01:18.980 --> 01:21.590 First of all that we need for this challenge. 01:21.590 --> 01:26.180 And before we get started on it, actually I just want to make a change to the background here. 01:26.180 --> 01:32.570 So instead of using these values we have a radial gradient instead. 01:32.570 --> 01:34.850 And let's just take a look at that. 01:34.880 --> 01:36.950 First of all before we get started. 01:37.070 --> 01:44.180 So after the ternary the question mark, we're going to be using a radial gradient. 01:44.180 --> 01:46.400 And it's going to be in quotes. 01:46.400 --> 01:49.850 Here we specify circle which we need to be accurate with. 01:49.880 --> 01:51.080 Of course this is a string. 01:51.080 --> 01:54.170 And that's the way we need to do this kind of functionality. 01:54.200 --> 01:59.960 And the first color is going to be 1E3ABA. 01:59.960 --> 02:06.080 And the second color of this gradient is going to be 111B27. 02:06.110 --> 02:08.480 And that's going to be for our dark mode. 02:08.480 --> 02:13.390 And then the other side of the ternary is also going to be a radial gradient. 02:13.390 --> 02:23.830 So I'm just going to copy this and paste it below and change the first color to be a e, c, f nine. 02:23.830 --> 02:29.470 And the second color is going to be F0F9FF. 02:29.500 --> 02:32.890 And if we go and take a look then we can see that. 02:32.920 --> 02:38.950 And it seems that changes pushed down our background and it's got our default background behind it. 02:38.950 --> 02:42.400 So we just need to make a few more changes as well. 02:42.400 --> 02:46.300 First of all, let's change the margin to a margin of eight. 02:46.300 --> 02:48.640 And in our box component here. 02:49.150 --> 02:51.610 And we'll just make a change after the background. 02:51.610 --> 02:56.080 And we'll specify P for padding above and below of six. 02:56.410 --> 02:58.600 If we go and take a look now that's a bit more like it. 02:58.600 --> 03:02.590 Now we can see our background is taking up the full height of the window. 03:02.590 --> 03:09.280 And if we compare that with the dark mode version and set dark mode back to true, then we can see that 03:09.280 --> 03:14.560 we've got this blue kind of dark shading behind our images. 03:14.560 --> 03:17.470 That's the look I'm going for here, if you prefer. 03:17.530 --> 03:20.470 just the black and gray colors I had before. 03:20.500 --> 03:21.550 Please feel free to use it. 03:21.550 --> 03:24.430 Your design is your choice of your application. 03:24.430 --> 03:26.260 This is what I'm going for in mine. 03:26.290 --> 03:27.430 Now back to the challenge. 03:27.430 --> 03:34.000 We want the buttons to be clickable or a button clickable here to switch between the two different modes. 03:34.000 --> 03:40.030 So let's go to the nav bar next, just to set this up and give you an indication of what you're aiming 03:40.030 --> 03:40.270 for. 03:40.270 --> 03:46.660 Here I'm going to once again just add a constant for the dark mode and set this to true. 03:46.660 --> 03:50.710 And obviously our goal is to make this dynamic so it can be clickable. 03:50.830 --> 03:58.840 And I'm going to add below the typography I'm going to have an icon button which we get from material 03:58.870 --> 04:00.400 UI of course. 04:00.820 --> 04:07.180 And this is going to need an onClick that the user can click on to change it to dark or light mode. 04:07.180 --> 04:12.820 I'll leave that empty for now, and we're going to check to see which mode we're in. 04:13.000 --> 04:19.240 And if we are in dark mode, then we're going to use an icon called dark mode. 04:19.240 --> 04:27.210 And this icon we need to get from material UI, and let's see if we can use the quick fix to fix this. 04:27.240 --> 04:32.190 Nope, but I've got dark mode as lowercase there that needs to be uppercase dark mode. 04:32.460 --> 04:33.570 And still no. 04:33.600 --> 04:39.960 Okay, so let's just import this one manually VS code still to this day for some things is still not 04:39.990 --> 04:47.700 100% perfect, but we can still import things manually if the automatic import does not work. 04:47.700 --> 04:54.600 So we need dark mode from and we're going to get it from atom UI icons material. 04:54.810 --> 04:58.200 And now the error or warning has gone away. 04:58.230 --> 05:03.480 Typically, once we've added one thing from a package then the next one does come in. 05:03.480 --> 05:04.050 Okay. 05:04.050 --> 05:08.040 And let's specify light mode for this one. 05:08.040 --> 05:09.510 And okay. 05:09.510 --> 05:15.510 So if we go take a look then we can see that we have an icon that looks like a moon. 05:15.510 --> 05:17.250 That's the dark mode icon. 05:17.280 --> 05:26.910 And if we change this to false then our icon changes to a sun which is the light mode icon. 05:27.150 --> 05:31.260 So we want to specify if we're in dark mode, we want to display the dark mode icon. 05:31.260 --> 05:34.080 If we're in light mode, we want to display light mode icon. 05:34.080 --> 05:36.960 And we can also give our light mode a color. 05:36.960 --> 05:40.080 And let's just make this yellow fill a color of the sun. 05:40.110 --> 05:43.770 Of course, and I cannot specify color in that way. 05:43.770 --> 05:44.880 It needs to be using SE. 05:45.210 --> 05:49.680 And then I say color and then I can specify yellow okay. 05:49.710 --> 05:50.550 So that's the setup. 05:50.550 --> 05:58.290 Now the goal of this challenge is to in our app dot TSX I've got the dark mode as a constant variable 05:58.290 --> 05:58.950 there. 05:59.070 --> 06:04.230 Well we really need that to be state so that we can update this dynamically, causing our component 06:04.260 --> 06:05.340 to rerender. 06:05.370 --> 06:10.290 And then using the dark mode or light mode that's been selected. 06:10.890 --> 06:13.170 Now our button is located on the nav bar. 06:13.170 --> 06:19.710 So we need to think about passing down not just the modes that we're in, but also the function to toggle 06:19.740 --> 06:22.080 between light mode and dark mode. 06:22.080 --> 06:24.060 So two things to do here, really. 06:24.060 --> 06:26.670 First of all, we need to create some states. 06:26.670 --> 06:32.340 Then we need to create a function to change the state from light mode to dark mode, or vice versa. 06:32.850 --> 06:37.070 If you want a hint about using a toggle. 06:37.070 --> 06:43.580 If you want to set a property to the opposite of what it is, then you could say something like dark 06:43.610 --> 06:47.660 mode equals opposite or not dark mode. 06:47.660 --> 06:51.560 And that would give you the opposite of what the value currently is. 06:51.590 --> 06:57.650 When it comes to the setting of the dark mode, now I'm just going to pause the video at the moment 06:57.650 --> 07:02.390 and then give you a demonstration of what it's going to work like after you've made the changes that 07:02.390 --> 07:04.790 are required in this challenge to get it working. 07:04.820 --> 07:09.980 So I'll pause the video and give you a quick demonstration of what it looks like when it's working. 07:10.010 --> 07:15.950 Okay, so the goal of this after you have completed this little challenge is that this icon, once you 07:15.980 --> 07:21.200 click on this, it should toggle between dark and light mode just as so. 07:21.200 --> 07:22.640 So please give this a go. 07:22.670 --> 07:25.580 See if you can get this little bit of functionality to work in. 07:25.610 --> 07:32.480 It is using stuff that we've already used, such as Usestate and passing down of props and functions 07:32.480 --> 07:34.160 to child components. 07:34.160 --> 07:40.280 And please give this your best shot and I'll walk through the solution in the next lesson.