All right.
And once we have the component in place, once we have the CSS in place, now let's set up the functionality.
And essentially we want to navigate to dashboard layout and we're looking for toggle dark theme.
Remember, that's what we invoke when we click on the component basically on our button.
And let's start by constructing the variable.
So here's what I want to do in the toggle dark theme.
I'm going to create a new variable and I'm going to call this new dark theme, and I'll set it equal
to the opposite of the current value.
So I'm going to go here with is dark theme, but I'll right away set it to the opposite value and then
we're going to go set this dark theme and we're going to provide this new dark theme.
And before you ask, yes, technically you can set up the logic just like we did here in a toggle sidebar.
It's just that we'll use this value.
In two more places.
And I just thought that it's easier if we have a new variable.
And now check it out.
Basically at the moment I click.
I'll be toggling the icon.
Why?
Well, because in our component, we have the logic correct, which essentially checks for the state
value, and depending on that value, displays the icon.
So that's the first step.
Now, up next, we want to add a class, a very specific class to our body element.
So if I take a look at my project, let me navigate to a dashboard.
I'll see over here this body element.
And essentially one of the ways how we can set up the dark mode in our application is by toggling the
class on the body element.
So effectively we want to go back to toggle dark theme then since in React, we can nicely use vanilla
JS We simply can target the body element.
So we go over here with document, then body, then we want to set up a class list property.
And on that property there is a toggle method.
Again, please keep in mind this is vanilla JS It has nothing to do with React and this toggle function
is looking for two things.
It's looking for class and it's also looking for a force, basically a Boolean.
So essentially, if the boolean is going to be true, we're going to add the class.
If not, we're going to remove it Again, this is a very specific class.
Why?
Well, because I already have the logic in the index.
So therefore go with dark theme and then which value we want to use as a boolean.
Well, we have that new dark theme.
Correct.
So let's save this one.
And you'll notice something interesting.
Once we click, we change the colors again.
We will cover the CSS logic in the following videos, so don't worry about it right now.
The main logic here is following.
If I click notice, I have this class and I'm adding this dark theme.
And then once we click again, now we don't have the class.
When we don't have the class.
Of course the colors are back to the light theme.
And then if the class is present, then of course we display the dark theme.
Now everything works well, but check it out once I refresh, even though I just had the dark theme,
I'm back to the light one.
Why?
Well, because we're not persisting this value.
Of course, by default, the dark theme is false.
And that's why we right away start with the light theme.
Now, in order to change that, we want to save this value.
Where?
Well, we have a local storage, so we're going to go here with local storage set item, and then we
want to come up with the value.
In my case, it's going to be a dark theme.
And then as far as which value, well again, we have this new dark theme.
Now we still need to access it.
So at the moment we'll just see that we nicely save this value pretty much every time we click.
But again, since the default value is false, even though in the local storage I have this true.
Well, nothing is happening.
Correct.
So in order to change that, we need to access this value from the local storage.
But here's the kicker.
Because of the structure of our application, there's going to be gotcha if we try to access it here
directly in the dashboard layout.
So let's do it together.
Don't worry, we will reuse these lines of code and eventually we'll set it in the app.
JSX.
I just want to showcase what is going to be the issue if we try to do that in the dashboard and effectively,
I just want to set up a function check default theme, which is going to look for the value in a local
storage and then depending on that value.
We will automatically add that dark theme and also we'll set that value as our state value.
So let's try this one out.
I'm going to go with const check.
And let's call it default theme.
That's my function.
What is the first thing we want to do inside of this function?
Well, we.
We'll come up with a variable is dark theme and we'll set it equal to local storage In order to access
the item we want to go get item.
And the item name is Dark theme.
And remember, we're saving this as a string, not as a Boolean.
Why is that important?
Well, because we want to check if it's equal to true, not to true, but actually in quotation marks.
Because again, we're getting back this one as a string.
And once we have this logic in place now, of course, we want to use this value and essentially.
Again, depending on the is dark theme, either add it to the.
Body element or remove it.
Again, the difference right now is that we're going to do that when this component basically loads
when we mount this component.
So in this case, we're doing it when we click on a button.
But this function is going to run when the actual component mounts.
So we simply want to grab.
This line of code and we want to change it around a little bit.
It's not going to be new dark theme.
There is no such variable.
We'll go with is dark theme and then what's the last thing we want to do from this function?
Return is dark theme.
Let's save it and then let's look for our is.
Dark theme.
State value.
And then let's invoke the function.
And if everything is correct, we right away should.
Get the correct value from the local storage.
So let me navigate to the big screen.
It's going to be easier.
And notice dark theme is equal to true.
So of course once I refresh, I right away add the dark theme class and of course I get the dark colors,
but there is a gotcha.
Remember we also have the landing page, we have the login, the register as well as the error one.
And at the moment we're only toggling this theme on a dashboard.
So a better approach is actually to invoke this check default theme when our application mounts.
Where does that happen?
Well, it's happening in the app JSX.
So like I said, we'll keep all of this logic.
Nothing changes.
We're going to change the location where we invoke it.
So let me cut this one out.
First of all, then we're going to go to App JS.
Again, that's our main pretty much entry point.
And then in between the imports and the Create browser router, I'm going to set up my function.
I want to right away invoke it and set it equal to some kind of variable.
In my case, I'm going to call this is dark theme.
Enabled.
And let's invoke check default theme and then let's keep on scrolling.
And essentially in here, we want to pass it to a dashboard layout because I still want to set it as
the value here.
Right.
But the difference right now is going to be that right away I'll check the value.
And if it's true, then it's going to be added to all of the pages, not just the.
Dashboard one.
Hopefully that is clear.
So let me just find where is my dashboard layout?
I'll use the same name.
Essentially.
I'll just say is dark theme enabled?
That's going to be my prop and I'll set it equal to my variable.
And then in a dashboard layout, let's access it and set it as our default value.
So let's go back over here.
Let's use the value.
And again, in the dashboard, nothing is going to change.
The beauty right now is that if, let's say I go to a different page.
I'm going to go to register.
It's going to be the same deal.
We'll still have this dark theme even if we refresh so effectively once the.
User comes to my application, signs up.
And then chooses the dark theme whenever he or she comes back.
We'll have this value in local storage and regardless of the page, and most likely it's going to be
the landing page that he or she sees when they come back to the application will still have this dark
theme.
Again, technically not a big deal if you want to keep other pages as light theme, just keep this logic
over here in the dashboard layout, but hopefully it's clear.
Why do we want to set this one up in the App.jsx?
Basically when our application loads and the reason for that is because then the dark theme is going
to be set for all of the pages, not just the dashboard layout, but rest of them.
And in the upcoming video, essentially I'll showcase how we can achieve.
The dark theme as far as the CSS is concerned.