WEBVTT 00:00.000 --> 00:00.300 Okay. 00:00.300 --> 00:03.420 What we have at the moment is a white background and white cards. 00:03.420 --> 00:08.610 And let's give the option for the users to choose between light mode and dark mode, common feature 00:08.610 --> 00:10.770 of any web application nowadays. 00:10.770 --> 00:14.610 And we're going to use material UI themes to help us with this. 00:14.640 --> 00:22.080 If we go up to the documentation and we go to customization, then there is an option in here to use 00:22.080 --> 00:22.710 a different palette. 00:22.740 --> 00:29.850 Mode lights the default and dark of course, and the way that we use this, we can simply specify a 00:29.850 --> 00:37.740 palette mode and create a theme and provide it to a theme provider, which we wrap around our application, 00:37.740 --> 00:44.430 and that will effectively make our background and the components use a dark theme. 00:44.430 --> 00:45.750 So let's give this a go. 00:45.780 --> 00:49.350 We're going to just simply create a theme, first of all, and use a theme provider. 00:49.350 --> 00:56.430 And then a challenge for yourselves will be to provide the toggle that a user can click on to change 00:56.430 --> 00:59.610 the theme based on their preferences. 00:59.610 --> 01:08.460 So let's see how we can start to set this up and inside the app component, let's create a const called 01:08.460 --> 01:14.040 theme and we'll set it equal to create theme, which we get from UI material. 01:14.070 --> 01:20.070 And we'll open parentheses and then curly brackets because we provide this as an object. 01:20.070 --> 01:22.050 And we'll specify the palettes. 01:22.050 --> 01:24.630 And we add colons open curly brackets. 01:24.630 --> 01:26.400 And then we can specify the mode. 01:26.400 --> 01:28.830 And this can either be dark or light. 01:28.830 --> 01:32.220 So let's just set it hardcode it for now to dark. 01:32.340 --> 01:38.910 And let's wrap the rest of our code inside a theme provider that we get from Mui material. 01:38.910 --> 01:43.650 Please make sure when you've got two things named exactly the same, you pick the correct one. 01:43.650 --> 01:49.140 We need the one from Mui material in this case, and it doesn't look like that imported successfully. 01:49.140 --> 01:55.770 So I'm just going to update the import from Mui material, and then we can specify the theme and set 01:55.770 --> 01:58.530 it to the theme variable that we created above. 01:58.560 --> 02:03.480 If we go and take a look at our application and the effect that this has had, then we can see that 02:03.480 --> 02:10.240 we've got dark components, but the background hasn't updated, Dated, but the card has and the navbar 02:10.240 --> 02:13.270 has just not our actual background. 02:13.300 --> 02:16.420 So let's go back and adjust that as well. 02:16.420 --> 02:23.260 So we've got our theme and the mood is dark, but let's create a variable to store the palette mode 02:23.260 --> 02:25.270 in and I'll create two. 02:25.300 --> 02:29.290 In fact I'll create a const dark mode equals. 02:29.320 --> 02:31.480 And I'm just going to hard code this to true for now. 02:31.480 --> 02:33.610 And we'll do something different shortly. 02:33.610 --> 02:37.240 And I'll create another one called Palettes Type. 02:37.240 --> 02:40.000 And I'm going to set this equal to dark mode. 02:40.240 --> 02:42.490 And if it is then it's going to be dark. 02:42.490 --> 02:45.640 If not it's going to be lights. 02:45.700 --> 02:52.960 And then where we've got our create theme for the mode, I'm just going to specify palette type, add 02:52.960 --> 02:53.620 a comma. 02:53.620 --> 02:55.690 And then we're going to set the background. 02:56.020 --> 03:00.220 And we're going to set the default background based on the palette type. 03:00.220 --> 03:07.000 So I'm going to say if the palette type is equal to lights then we're going to use a ternary operator. 03:07.000 --> 03:11.150 And what this means if after the question mark. 03:11.150 --> 03:15.530 If the palette type is indeed light, then we can set our background color to. 03:15.560 --> 03:23.330 And I'm just going to set it to hash e a e a e a, which is a light gray color, or it's going to be 03:23.330 --> 03:29.990 set to and I'll use hash and 121212, which is a dark color. 03:29.990 --> 03:31.850 And if we go and take a look at our progress. 03:31.880 --> 03:35.510 Well, it appears it didn't make any actual difference what we've just done there, but we do need to 03:35.510 --> 03:41.180 make a change inside our code here as well in this part. 03:41.240 --> 03:43.730 So below the navbar that's going to stay the same. 03:43.730 --> 03:49.040 I'm actually going to create a box which is going to wrap around our other code inside here. 03:49.040 --> 03:54.080 And I'm going to take our container cutless and put it inside that box. 03:54.080 --> 03:58.940 And the box we're going to give some additional styling for. 03:58.940 --> 04:03.110 So I'm going to set it to SX equals double curly brackets. 04:03.230 --> 04:05.690 And I'm going to give this a min height property. 04:05.690 --> 04:11.780 And I'm going to set it to 100 viewport height which takes up the full height of the screen. 04:11.780 --> 04:17.850 And that will become relevant for our background as well, so it does take up its full available space, 04:17.940 --> 04:21.300 even if there's not much content on the page. 04:21.300 --> 04:23.520 And I'm going to set the backgrounds. 04:23.520 --> 04:28.650 And once again, I'm going to check to see if we're in dark mode. 04:28.650 --> 04:33.990 So I'm going to say dark mode, add the ternary operator, and literally just copy what we have here. 04:33.990 --> 04:38.550 For now, we'll do something a bit different soon, but I'm just going to paste in the colors that we 04:38.550 --> 04:39.750 used here. 04:39.780 --> 04:45.840 Now what we should find if we go back to our application now, we can see that we have a gray light 04:45.840 --> 04:48.330 gray background, which is not quite what I'm looking for. 04:48.330 --> 04:53.460 I wanted the dark background when we're in dark mode, so I actually got those the wrong way round. 04:53.460 --> 05:01.530 And let's just shift this over to the right hand side and take out the extra curly bracket. 05:01.530 --> 05:07.830 So if I go back and check now, now we can see that it does have a dark background below behind the 05:07.830 --> 05:08.220 cards. 05:08.220 --> 05:11.970 But we do have some extra margins here. 05:11.970 --> 05:14.880 And that is something that we need to correct now. 05:14.910 --> 05:21.190 Material UI comes with a CSS Baseline to remove the default browser styling, which is conflicting with 05:21.190 --> 05:22.210 what we're doing here. 05:22.210 --> 05:27.310 So we're just going to add underneath the theme provider the CSS baseline component. 05:27.430 --> 05:32.500 If we go back and take a look now we can see that this is looking exactly how we want it for at least 05:32.500 --> 05:33.430 dark mode. 05:33.490 --> 05:41.680 And if I go back and make a change to the let's see, let's change dark mode to false and go back and 05:41.680 --> 05:42.160 take a look. 05:42.160 --> 05:48.370 Now we can see that we've got the light gray background when we're in light mode, but we want to make 05:48.370 --> 05:50.860 this more convenient for our users. 05:50.860 --> 05:54.640 So what's coming up next is a bit of a challenge actually. 05:54.670 --> 06:00.340 We want to be able to toggle between dark and light modes, and this is a good opportunity for you to 06:00.370 --> 06:05.020 practice using states and passing down properties to a component. 06:05.020 --> 06:10.930 So in the next lesson, we'll set up the challenge, set you loose on figuring out how to do this yourself. 06:10.930 --> 06:17.200 And then the lesson after that, I'll present the solution and also enhance the background as well, 06:17.200 --> 06:20.050 just so it looks and feels a bit better than it currently does. 06:20.050 --> 06:21.910 So that's coming up next.