Okay.
What are we going to do in this lesson?
Well, it's a bit of a challenge, actually, because we want our user to be able to choose between
dark mode and light mode to their preference.
And we're going to add a couple of icons where we'll have a single icon they can click on, or an icon
button to be more specific that they can click on.
That changes the theme to dark or light mode.
Now, earlier on, we took a look at using the Usestate hook that's going to be useful and the button
is going to be located on the navbar, which means we're going to need to pass down properties or props
to the child component of, well, the app dot TSX.
So the navbar is where they click on the button, and then that state gets passed up to the app component
in order to make the change.
Now if we go back and take a look at our app component, there's a couple of things I want to set up.
First of all, before we embark on the challenge, because just to make a few styling improvements to
the background of our app.
And I also just want to show you where the buttons are going to be located as well.
And the challenge really is to convert what we have here into something dynamic, the user can click
on and pass something down to the nav bar so that they can make the change using the button in the nav
bar.
But let's just set the Or hardcode the things in place.
First of all that we need for this challenge.
And before we get started on it, actually I just want to make a change to the background here.
So instead of using these values we have a radial gradient instead.
And let's just take a look at that.
First of all before we get started.
So after the ternary the question mark, we're going to be using a radial gradient.
And it's going to be in quotes.
Here we specify circle which we need to be accurate with.
Of course this is a string.
And that's the way we need to do this kind of functionality.
And the first color is going to be 1E3ABA.
And the second color of this gradient is going to be 111B27.
And that's going to be for our dark mode.
And then the other side of the ternary is also going to be a radial gradient.
So I'm just going to copy this and paste it below and change the first color to be a e, c, f nine.
And the second color is going to be F0F9FF.
And if we go and take a look then we can see that.
And it seems that changes pushed down our background and it's got our default background behind it.
So we just need to make a few more changes as well.
First of all, let's change the margin to a margin of eight.
And in our box component here.
And we'll just make a change after the background.
And we'll specify P for padding above and below of six.
If we go and take a look now that's a bit more like it.
Now we can see our background is taking up the full height of the window.
And if we compare that with the dark mode version and set dark mode back to true, then we can see that
we've got this blue kind of dark shading behind our images.
That's the look I'm going for here, if you prefer.
just the black and gray colors I had before.
Please feel free to use it.
Your design is your choice of your application.
This is what I'm going for in mine.
Now back to the challenge.
We want the buttons to be clickable or a button clickable here to switch between the two different modes.
So let's go to the nav bar next, just to set this up and give you an indication of what you're aiming
for.
Here I'm going to once again just add a constant for the dark mode and set this to true.
And obviously our goal is to make this dynamic so it can be clickable.
And I'm going to add below the typography I'm going to have an icon button which we get from material
UI of course.
And this is going to need an onClick that the user can click on to change it to dark or light mode.
I'll leave that empty for now, and we're going to check to see which mode we're in.
And if we are in dark mode, then we're going to use an icon called dark mode.
And this icon we need to get from material UI, and let's see if we can use the quick fix to fix this.
Nope, but I've got dark mode as lowercase there that needs to be uppercase dark mode.
And still no.
Okay, so let's just import this one manually VS code still to this day for some things is still not
100% perfect, but we can still import things manually if the automatic import does not work.
So we need dark mode from and we're going to get it from atom UI icons material.
And now the error or warning has gone away.
Typically, once we've added one thing from a package then the next one does come in.
Okay.
And let's specify light mode for this one.
And okay.
So if we go take a look then we can see that we have an icon that looks like a moon.
That's the dark mode icon.
And if we change this to false then our icon changes to a sun which is the light mode icon.
So we want to specify if we're in dark mode, we want to display the dark mode icon.
If we're in light mode, we want to display light mode icon.
And we can also give our light mode a color.
And let's just make this yellow fill a color of the sun.
Of course, and I cannot specify color in that way.
It needs to be using SE.
And then I say color and then I can specify yellow okay.
So that's the setup.
Now the goal of this challenge is to in our app dot TSX I've got the dark mode as a constant variable
there.
Well we really need that to be state so that we can update this dynamically, causing our component
to rerender.
And then using the dark mode or light mode that's been selected.
Now our button is located on the nav bar.
So we need to think about passing down not just the modes that we're in, but also the function to toggle
between light mode and dark mode.
So two things to do here, really.
First of all, we need to create some states.
Then we need to create a function to change the state from light mode to dark mode, or vice versa.
If you want a hint about using a toggle.
If you want to set a property to the opposite of what it is, then you could say something like dark
mode equals opposite or not dark mode.
And that would give you the opposite of what the value currently is.
When it comes to the setting of the dark mode, now I'm just going to pause the video at the moment
and then give you a demonstration of what it's going to work like after you've made the changes that
are required in this challenge to get it working.
So I'll pause the video and give you a quick demonstration of what it looks like when it's working.
Okay, so the goal of this after you have completed this little challenge is that this icon, once you
click on this, it should toggle between dark and light mode just as so.
So please give this a go.
See if you can get this little bit of functionality to work in.
It is using stuff that we've already used, such as Usestate and passing down of props and functions
to child components.
And please give this your best shot and I'll walk through the solution in the next lesson.