And once we're set with our dates, so once we know how to use my address, of course, and let's worry
about the toggle functionality where I would want to change the values for my background as well as
the text, because think about it, not only you need to change the background for all body, but you
also need to change the text, because if you go to the dark background, of course, you'd want your
text to be visible.
And like I said, this is going to be the case where we will go to see someone and write a little bit
of success.
So now I'm going to navigate to next year as first and you'll notice that this is somewhat typical setup
where we have serious variables and for the most part, we just attach it to the road.
And essentially that means that everywhere in our document we can access those values.
And if you're not familiar with those variables, the way they work, you go with hyphen, hyphen,
some kind of name, and then the value.
And what that means is later when you're typing this, you simply can access that value.
And that way, if you need to change it to something else, then of course, you just need to do that
in one place.
So, for example, if I change my mind and if I would say that what was primary color, it is just going
to be simply red once you change it.
Notice everywhere where I used in the access code that value the primary one.
Of course, now I have a different result on a screen so I can already see that as I keep on scrolling
the hearing to has the class of primary.
And by the way, if you want to access that value, you just go with VAR and that whatever is the variable
and then also button this primary.
So if I'm going to be changing this value, I'll also have changes in my document.
So hopefully that squares.
I'm going to go back to my pin color and normally you just do that in one place.
If you take a look at the rest of the project, any of the project, you'll notice that in the source,
in the index says this is what I have.
So I have a route.
So I'm attaching all of them to the demo because I would want to use it throughout my document.
I have some kind of values and that throughout my sources I'm just accessing them.
And again, we access them by VA and then whatever is the name.
Now, this project is going to be a little bit different since, of course, I would want to have essentially
two values because let's think about it.
So at the moment, yes, I have one color for the background, which is white, then I have one color
for the font, which is this black one.
I'm going to have one primary color.
However, we need to keep in mind that of course, we have two themes.
So the setup we're going to have is two classes, one for dark theme and then the other one for the
lighting.
Now, one thing we need to keep in mind, though, that the names for the variables that will be setting
up in those classes need to match.
And not only they need to match to each other, but they also need to match to whatever we have right
now in here.
Now, I can tell right away that we can remove this route once we're done.
Setting up those classes will be able to remove the rod and the functionality won't be changed.
Now, why the class names need to match or I'm sorry, why the variable names need to match to whatever
I have enrolled?
Well, simply because I'm already using them in my success.
So, of course, initially, when you're setting up, just make sure that if you have Deo's two classes
that the variable names match to each other.
And then once that is done, then of course you can use it in the access so you can use those variable
names.
So in my case, I already set up the route.
So we have something on the screen.
And then once we set to classes, once we set up those values, then of course, our remote is to show
that, yes, we don't need that route selector anymore.
So after this long an annoying intro, we're going to go to dark theme again.
Class time is up to you because, of course, we'll have to access Energetics.
But I'm going to go with dark theme.
And then like I said, I want the names of my variable to be exactly the same because I'm already using
them in my success.
So I'm going to copy and paste.
And by the way, that's not what I want it.
So I'm going to copy.
We're going to post and now, of course, I would just want to change these viewers around after deducting
what I would want, well, is the background going to be white or is it going to be dark?
And you can probably already guess that it is going to be dark.
So I'm going to cut it out from the font and copy and paste what the values are up to you.
But in my case, I'm just going to be flipping them and then I'm going to go with hashtag FMF.
So that is going to be different color.
And as far as the primary, well, when we switch to dark time, I'm just going to change somewhat of
the color here where it is one kind of shade of pink, at least in my opinion.
Obviously, if you're color expert, you're probably yelling at me right now.
But in my opinion, this is one shade of pink and then we go to the lighter one.
So once we get to a dark mode and of course, I would want the shade to change a little bit.
So I'm going to go with hashtag for A and then seven C and then four.
So that's going to be Mashad.
And then for the light one, what I'm gonna do is copy and paste everything.
And then, of course, I'll change the name, I'll change it to the light theme, and of course, I
would want to change these values.
So, again, I'm going to go here with Jeff.
So I'm just going to cut out this value and we're going to change it if we do need to have a hash tag
here and copy and paste the dark one.
So we have dark theme and lighting and at this point we can either delete it or comment order just because
I would want you to understand that you don't need to have it anymore.
So now we have two things.
We have dark thing and then we have a lighting.
And the moment we say we are like, hey, listen, where did my colors go?
Well, they are still there, but we will need to attach those glasses to our HDMI at the moment.
Notice I do have the body, so body selector and I am using the color.
However, I do need to add those classes to my e-mail or more specifically, one class at the time since
I would want to toggle.
And then.
Everywhere where I'm using those values, you'll notice that our look is also going to change.
So now, of course, we will need to navigate back to abcess and set up our button so we have the button.
Correct.
And once I click the button, of course, I would want to change that thing.
Now, I'm going to start by setting up some kind of state volume.
So constant theme and then set the that's the first one that I'm going to go with use state and whichever
theme you want by default.
So in my case, I'm going to go with lighting.
Just make sure that the text that you're passing in matches the class name.
So in here, if you call this Burrito and Taco Bell, please use the same names in your abcess.
In my case, I have Darkling and I have a lighting and I would want to start with the lighting.
So once the uploads, I would want the lighting.
That's why in the Abdus I'll pass here restring of light and amante.
That's the starting point.
Then I would want to have a usufruct.
So I'm going to go here with usufruct.
And then I'll pass in my callback function and I would want to run my callback function every time this
theme changes, so eventually, of course, there's going to be a function that is called whenever we
click the button, and in that function will be changing the value.
And then every time that changes, I would want to do something.
That's why I'm going to call my theme over here.
And we also know that this is going to run by default.
Correct.
So this Ahrons right away, when my app loads at the moment, what does the theme value will?
That is the lightning.
And here comes the magic, where again, we're just going back to vanilla JavaScript where we go to
document.
And then if I would want to access the HDMI element, I just need to go with document element.
And if you want to console it, please, definitely.
This one you'll see that we have access to HDMI Ohman.
And if I would want to add a clash, because that is effectively what we're doing with adding a class
of light team on the element.
I simply need to go with class.
And then and now what is going to be the value of my class name?
Well, that is going to be theme over here, correct?
So if you go with theme, you'll notice that right away I get my lighting.
By the way, I can clearly see that because I have my support here.
Of course, I would want to change this value to my dark color.
So I'm here.
That should be the primary.
And just copy and paste.
And now you'll notice that everything got a shade darker because now, of course, I have different
color.
So that is my default theme.
And if you want to double check that again, navigate to the star, I would suggest probably a bigger
browser window and check it out.
I have HDMI element.
Like I said, we went back to your script once the uploads, we target the element and I added the class
of light.
So now the last step is setting up the function that changes the toggles between lighting, inductive
lighting and acting.
So on here, why don't we set up that function first, at least the placeholder so we don't have a big
fat error from the react and we're going to go with our function.
And for the time being, I'm not going to add any functionality in here and I'll simply say unclick.
So once we click the button, then of course I would want to toggle my thing, toggle thing.
And in here we go with if the game is equal to the light light theme, then what I would want well I
would want to change it to the dark one.
Correct.
So if the theme is light then set theme and again, make sure that the values match exactly what you
have for the classes.
And here I have darkling.
However, if it is already the ducting, well then we just go with else and then set them.
And of course now we're looking for the lighting.
So effectively the opposite values.
And once we set up this functionality, of course our double check that the attribute is correct.
In this case, that is going to be on click.
Then I'll save and I'm going to navigate to the bigger screen and now notice in the elements.
If I toggle now, I have dark theme.
So the class changes and as the class changes, so do the values that I have for my variables.
So if I switch from light team, dark team, of course I still have the same variable names or the values
are different.
And then of course now these values are used in my success and that's how we can set up toggle and react.