1
00:00:00,050 --> 00:00:00,370
All right.

2
00:00:00,410 --> 00:00:04,520
And once we have the structure in place, let's also set up the CSS.

3
00:00:04,520 --> 00:00:07,100
So we're looking for theme toggle.

4
00:00:08,160 --> 00:00:09,690
In the wrappers.

5
00:00:10,110 --> 00:00:13,050
And basically we want to remove all of the styles.

6
00:00:13,260 --> 00:00:14,190
Let's save.

7
00:00:14,220 --> 00:00:14,660
Yep.

8
00:00:14,670 --> 00:00:19,380
This is what we're going to see on the screen and we're going to start by setting up the background

9
00:00:19,380 --> 00:00:21,600
equal to transparent.

10
00:00:21,810 --> 00:00:25,680
Then we want to also do the same thing with the border color.

11
00:00:26,320 --> 00:00:28,560
We'll set it to transparent as well.

12
00:00:28,560 --> 00:00:31,530
So let me copy and paste this one over here.

13
00:00:31,560 --> 00:00:35,340
Then let's come up with some kind of width for this particular button.

14
00:00:35,340 --> 00:00:38,560
In my case, I'm going to go with 3.5 rems.

15
00:00:38,580 --> 00:00:41,370
Then we want to go also with some height.

16
00:00:41,400 --> 00:00:44,040
This is going to be equal to two rems.

17
00:00:44,070 --> 00:00:44,820
Now.

18
00:00:45,880 --> 00:00:47,560
There was a little.

19
00:00:48,440 --> 00:00:49,070
Glitch.

20
00:00:49,100 --> 00:00:49,760
That's okay.

21
00:00:49,760 --> 00:00:50,780
Let me refresh.

22
00:00:50,780 --> 00:00:56,180
And then again, I have a button and inside of the button I have the icon.

23
00:00:56,180 --> 00:01:00,200
So in order to place it exactly in the center, we want to go to display grid.

24
00:01:00,350 --> 00:01:05,680
And then let's go with place items and let's set it equal to the center one.

25
00:01:06,050 --> 00:01:12,230
Then we want to add the cursor and let's set it equal to pointer.

26
00:01:12,230 --> 00:01:17,660
And then as far as the toggle icon, first we'll just increase the font size.

27
00:01:17,660 --> 00:01:24,170
So I'm going to go with font size and that is going to be equal to 1.15 Rems.

28
00:01:24,170 --> 00:01:29,180
And then as far as the color, well, that is going to be dynamic and therefore, again, we're going

29
00:01:29,180 --> 00:01:30,590
to use the text.

30
00:01:31,260 --> 00:01:36,300
Color variable, which is something we're going to set in a second.

31
00:01:36,660 --> 00:01:43,110
Again, let me refresh and if everything is correct, this is what we're going to see on the screen.

32
00:01:43,110 --> 00:01:48,810
And with this in place, we're done with the CSS for the theme toggle component.