Okay.
What we have at the moment is a white background and white cards.
And let's give the option for the users to choose between light mode and dark mode, common feature
of any web application nowadays.
And we're going to use material UI themes to help us with this.
If we go up to the documentation and we go to customization, then there is an option in here to use
a different palette.
Mode lights the default and dark of course, and the way that we use this, we can simply specify a
palette mode and create a theme and provide it to a theme provider, which we wrap around our application,
and that will effectively make our background and the components use a dark theme.
So let's give this a go.
We're going to just simply create a theme, first of all, and use a theme provider.
And then a challenge for yourselves will be to provide the toggle that a user can click on to change
the theme based on their preferences.
So let's see how we can start to set this up and inside the app component, let's create a const called
theme and we'll set it equal to create theme, which we get from UI material.
And we'll open parentheses and then curly brackets because we provide this as an object.
And we'll specify the palettes.
And we add colons open curly brackets.
And then we can specify the mode.
And this can either be dark or light.
So let's just set it hardcode it for now to dark.
And let's wrap the rest of our code inside a theme provider that we get from Mui material.
Please make sure when you've got two things named exactly the same, you pick the correct one.
We need the one from Mui material in this case, and it doesn't look like that imported successfully.
So I'm just going to update the import from Mui material, and then we can specify the theme and set
it to the theme variable that we created above.
If we go and take a look at our application and the effect that this has had, then we can see that
we've got dark components, but the background hasn't updated, Dated, but the card has and the navbar
has just not our actual background.
So let's go back and adjust that as well.
So we've got our theme and the mood is dark, but let's create a variable to store the palette mode
in and I'll create two.
In fact I'll create a const dark mode equals.
And I'm just going to hard code this to true for now.
And we'll do something different shortly.
And I'll create another one called Palettes Type.
And I'm going to set this equal to dark mode.
And if it is then it's going to be dark.
If not it's going to be lights.
And then where we've got our create theme for the mode, I'm just going to specify palette type, add
a comma.
And then we're going to set the background.
And we're going to set the default background based on the palette type.
So I'm going to say if the palette type is equal to lights then we're going to use a ternary operator.
And what this means if after the question mark.
If the palette type is indeed light, then we can set our background color to.
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
set to and I'll use hash and 121212, which is a dark color.
And if we go and take a look at our progress.
Well, it appears it didn't make any actual difference what we've just done there, but we do need to
make a change inside our code here as well in this part.
So below the navbar that's going to stay the same.
I'm actually going to create a box which is going to wrap around our other code inside here.
And I'm going to take our container cutless and put it inside that box.
And the box we're going to give some additional styling for.
So I'm going to set it to SX equals double curly brackets.
And I'm going to give this a min height property.
And I'm going to set it to 100 viewport height which takes up the full height of the screen.
And that will become relevant for our background as well, so it does take up its full available space,
even if there's not much content on the page.
And I'm going to set the backgrounds.
And once again, I'm going to check to see if we're in dark mode.
So I'm going to say dark mode, add the ternary operator, and literally just copy what we have here.
For now, we'll do something a bit different soon, but I'm just going to paste in the colors that we
used here.
Now what we should find if we go back to our application now, we can see that we have a gray light
gray background, which is not quite what I'm looking for.
I wanted the dark background when we're in dark mode, so I actually got those the wrong way round.
And let's just shift this over to the right hand side and take out the extra curly bracket.
So if I go back and check now, now we can see that it does have a dark background below behind the
cards.
But we do have some extra margins here.
And that is something that we need to correct now.
Material UI comes with a CSS Baseline to remove the default browser styling, which is conflicting with
what we're doing here.
So we're just going to add underneath the theme provider the CSS baseline component.
If we go back and take a look now we can see that this is looking exactly how we want it for at least
dark mode.
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
take a look.
Now we can see that we've got the light gray background when we're in light mode, but we want to make
this more convenient for our users.
So what's coming up next is a bit of a challenge actually.
We want to be able to toggle between dark and light modes, and this is a good opportunity for you to
practice using states and passing down properties to a component.
So in the next lesson, we'll set up the challenge, set you loose on figuring out how to do this yourself.
And then the lesson after that, I'll present the solution and also enhance the background as well,
just so it looks and feels a bit better than it currently does.
So that's coming up next.