All right.
And once we have the structure in place, let's also set up the CSS.
So we're looking for theme toggle.
In the wrappers.
And basically we want to remove all of the styles.
Let's save.
Yep.
This is what we're going to see on the screen and we're going to start by setting up the background
equal to transparent.
Then we want to also do the same thing with the border color.
We'll set it to transparent as well.
So let me copy and paste this one over here.
Then let's come up with some kind of width for this particular button.
In my case, I'm going to go with 3.5 rems.
Then we want to go also with some height.
This is going to be equal to two rems.
Now.
There was a little.
Glitch.
That's okay.
Let me refresh.
And then again, I have a button and inside of the button I have the icon.
So in order to place it exactly in the center, we want to go to display grid.
And then let's go with place items and let's set it equal to the center one.
Then we want to add the cursor and let's set it equal to pointer.
And then as far as the toggle icon, first we'll just increase the font size.
So I'm going to go with font size and that is going to be equal to 1.15 Rems.
And then as far as the color, well, that is going to be dynamic and therefore, again, we're going
to use the text.
Color variable, which is something we're going to set in a second.
Again, let me refresh and if everything is correct, this is what we're going to see on the screen.
And with this in place, we're done with the CSS for the theme toggle component.