All right.
And as far as the CS is concerned, let's navigate to index CS and we're going to do it a little bit
differently.
So we're not going to type everything from scratch.
Essentially the way I'll showcase is by commenting some stuff out and then one by one we'll add the
code and hopefully that way you can clearly see what's happening.
So here's the first thing that I want to do navigate to index CS.
And line by line, comment them out because I'll add them also line by line.
So again, this is totally optional.
I'll say no, if you're not interested, you don't have to.
Follow along.
You can just sit back and relax.
And when it comes to dark theme, let's just comment out all of them.
So this is our starting setup.
We're notice in the body I have a background color as well as the color, which is going to be a text
color.
And it's always my preference to set values as CSS variables.
So it might look a little bit funky.
But yes, basically we have background property and instead of setting it equal to gray 50 or some other
value, I'll actually use the background color CSS variable and then this one will have the CSS variable
for one of my colors.
So I have a bunch of shades over here.
Notice over here there's gray 50, right?
And that's the value I'm using for this CSS variable.
And then the CSS variable I use in the body.
Long story short, for entire body and the text, we get specific color.
Now why I prefer such setup?
Well, because that way if I change the shades most likely I'll keep the same numbers.
But I don't have to do it anywhere else in my project.
So once I change them, I just swap them in one place and everywhere else I'm just using the same logic.
Okay, so that's the starting point.
Now let's talk about the most basic bare bones, dark mode setup.
Remember, what are we doing when we click on this button?
Well, we're toggling that class, right?
We're toggling that.
The dark team, it gets added and removed from the body element.
So here's the kicker In this class, I can just change the CSS variables.
So.
What I did is create two more CSS variables in the root.
So the first one is going to be dark mode, background color and then dark mode, text color.
And then in this dark theme class.
Essentially I'm just changing these two CSS variables and I'm setting values equal to dark mode text
and dark mode background color.
So think of it this way.
Of course I can hardcode over here if I want, I can type here again.
Hashtag three, three, three and whatever is here for text color.
And again, the general idea is that for this background you'll use something light.
And this one of course is going to be something dark.
So once we save notice, now we're actually changing that value for the background as well as the text.
Again, it might look a little bit funky because we have quite a bit of CSS variables.
Please keep in mind that it's just a preference because that way wherever I use this value.
I don't have to change it.
I just need to change it over here.
That's why it's my preference.
But you can definitely just go with dark theme and set it equal to this.
And also, I'm sorry, that was the background color.
Basically this one equal to this one.
And then the text color equal to a text color.
It's definitely an option, but I just like setting up the CSS variables and I'm not going to repeat
why.
Okay.
So that's the most basic setup.
But if we take a look at our application notice, I kind of wanted to set nav bar on the form and the.
Actual big sidebar in a different shade.
So it's still a dark theme, correct?
But it's a different shade.
So therefore I just created more CSS variables.
So notice.
In here I have background, secondary color.
So what happens when I have a light theme?
I also have distinction between the big sidebar.
On the page, for example.
Now, do you have to do it?
No, I just added because I thought it gave a very nice look to the project, but it's definitely not
mandatory.
So the biggest one is to just understand that we're flipping those values, but this is technically
an extra.
So since I have these CSS variables as well, what can we do when we toggle the dark theme?
Well.
We can flip them as well.
Right Now, what are the values?
Well, we just created more shades.
That's it.
So essentially, instead of having two colors that we're flipping now, we're flipping four of them
now, is it more complex because you have to pretty much check every component?
Yeah, it is a little bit tricky.
So pretty much the more colors you're going to add, the tougher is going to be.
That's something to keep in mind.
Also, since right now you have these CSS variables, unless it's a primary color or it's maybe some
shade of primary color.
In that case, of course it's straight up.
You just use whatever is the CSS variable for the primary color.
For example, in my case, it's primary 500 or 200 and all that.
Unless you have that color, you need to use the CSS variables.
So again, it's background color, it's secondary color and it's a text color.
So remember when we were, for example, setting up.
Um, let's go to a big sidebar.
I believe in here.
We used it.
Remember, for the color, I didn't use just some random white color.
I went with color, and that was equal to text.
Secondary color, because that was my choice.
And also, remember when we talked about the sidebar container, the background, it wasn't some random
white color or gray one.
No, I use this value.
The background secondary color.
Why?
Well, because we have multiple choices in here.
So background secondary color by default is white.
That's why when we have a light theme, the sidebar and nav bar, they both are white.
But.
Notice this one Dark mode.
BG Secondary color.
What is this one?
Well, it's a lighter shade of our main dark mode.
Background color.
Correct.
So what do we do here in dark theme background, secondary color?
Well, we flip it correct.
We flip it to a dark mode background, secondary color.
So what I'm trying to say here is that since we're flipping the modes, it's not just going to be one
value, it's not going to be one hardcoded value.
That's why we use the CSS variable and then depending.
On a theme we have.
In the CSS, we will actually set the value.
Hopefully that is clear.
And now we can move on to the next step.