1
00:00:00,170 --> 00:00:00,680
All right.

2
00:00:00,680 --> 00:00:07,430
And as far as the CS is concerned, let's navigate to index CS and we're going to do it a little bit

3
00:00:07,430 --> 00:00:07,939
differently.

4
00:00:07,939 --> 00:00:11,720
So we're not going to type everything from scratch.

5
00:00:12,050 --> 00:00:21,410
Essentially the way I'll showcase is by commenting some stuff out and then one by one we'll add the

6
00:00:21,410 --> 00:00:25,580
code and hopefully that way you can clearly see what's happening.

7
00:00:25,580 --> 00:00:31,820
So here's the first thing that I want to do navigate to index CS.

8
00:00:32,540 --> 00:00:37,700
And line by line, comment them out because I'll add them also line by line.

9
00:00:37,700 --> 00:00:39,980
So again, this is totally optional.

10
00:00:39,980 --> 00:00:42,920
I'll say no, if you're not interested, you don't have to.

11
00:00:43,710 --> 00:00:44,640
Follow along.

12
00:00:45,300 --> 00:00:47,580
You can just sit back and relax.

13
00:00:48,490 --> 00:00:53,800
And when it comes to dark theme, let's just comment out all of them.

14
00:00:54,700 --> 00:00:57,130
So this is our starting setup.

15
00:00:57,220 --> 00:01:05,860
We're notice in the body I have a background color as well as the color, which is going to be a text

16
00:01:05,860 --> 00:01:06,400
color.

17
00:01:06,400 --> 00:01:11,840
And it's always my preference to set values as CSS variables.

18
00:01:11,860 --> 00:01:14,320
So it might look a little bit funky.

19
00:01:14,320 --> 00:01:20,860
But yes, basically we have background property and instead of setting it equal to gray 50 or some other

20
00:01:20,860 --> 00:01:29,410
value, I'll actually use the background color CSS variable and then this one will have the CSS variable

21
00:01:29,410 --> 00:01:30,670
for one of my colors.

22
00:01:30,670 --> 00:01:32,460
So I have a bunch of shades over here.

23
00:01:32,470 --> 00:01:34,990
Notice over here there's gray 50, right?

24
00:01:34,990 --> 00:01:38,980
And that's the value I'm using for this CSS variable.

25
00:01:38,980 --> 00:01:42,220
And then the CSS variable I use in the body.

26
00:01:42,640 --> 00:01:48,200
Long story short, for entire body and the text, we get specific color.

27
00:01:48,220 --> 00:01:50,660
Now why I prefer such setup?

28
00:01:50,690 --> 00:01:56,030
Well, because that way if I change the shades most likely I'll keep the same numbers.

29
00:01:56,180 --> 00:01:59,990
But I don't have to do it anywhere else in my project.

30
00:01:59,990 --> 00:02:06,740
So once I change them, I just swap them in one place and everywhere else I'm just using the same logic.

31
00:02:07,220 --> 00:02:09,740
Okay, so that's the starting point.

32
00:02:09,770 --> 00:02:15,110
Now let's talk about the most basic bare bones, dark mode setup.

33
00:02:15,110 --> 00:02:19,310
Remember, what are we doing when we click on this button?

34
00:02:19,310 --> 00:02:21,290
Well, we're toggling that class, right?

35
00:02:21,290 --> 00:02:22,880
We're toggling that.

36
00:02:23,410 --> 00:02:28,120
The dark team, it gets added and removed from the body element.

37
00:02:28,450 --> 00:02:35,590
So here's the kicker In this class, I can just change the CSS variables.

38
00:02:36,050 --> 00:02:36,920
So.

39
00:02:37,530 --> 00:02:42,900
What I did is create two more CSS variables in the root.

40
00:02:42,930 --> 00:02:49,140
So the first one is going to be dark mode, background color and then dark mode, text color.

41
00:02:49,230 --> 00:02:52,530
And then in this dark theme class.

42
00:02:53,330 --> 00:03:03,920
Essentially I'm just changing these two CSS variables and I'm setting values equal to dark mode text

43
00:03:03,920 --> 00:03:06,350
and dark mode background color.

44
00:03:06,440 --> 00:03:08,870
So think of it this way.

45
00:03:08,900 --> 00:03:13,610
Of course I can hardcode over here if I want, I can type here again.

46
00:03:13,640 --> 00:03:18,130
Hashtag three, three, three and whatever is here for text color.

47
00:03:18,140 --> 00:03:22,400
And again, the general idea is that for this background you'll use something light.

48
00:03:22,400 --> 00:03:24,810
And this one of course is going to be something dark.

49
00:03:24,830 --> 00:03:32,990
So once we save notice, now we're actually changing that value for the background as well as the text.

50
00:03:33,140 --> 00:03:39,640
Again, it might look a little bit funky because we have quite a bit of CSS variables.

51
00:03:39,650 --> 00:03:45,860
Please keep in mind that it's just a preference because that way wherever I use this value.

52
00:03:46,630 --> 00:03:48,130
I don't have to change it.

53
00:03:48,130 --> 00:03:50,590
I just need to change it over here.

54
00:03:51,350 --> 00:03:53,060
That's why it's my preference.

55
00:03:53,060 --> 00:03:57,230
But you can definitely just go with dark theme and set it equal to this.

56
00:03:57,440 --> 00:04:01,550
And also, I'm sorry, that was the background color.

57
00:04:01,550 --> 00:04:04,070
Basically this one equal to this one.

58
00:04:04,070 --> 00:04:06,620
And then the text color equal to a text color.

59
00:04:06,620 --> 00:04:12,020
It's definitely an option, but I just like setting up the CSS variables and I'm not going to repeat

60
00:04:12,050 --> 00:04:12,560
why.

61
00:04:12,800 --> 00:04:13,400
Okay.

62
00:04:13,400 --> 00:04:15,350
So that's the most basic setup.

63
00:04:15,350 --> 00:04:23,760
But if we take a look at our application notice, I kind of wanted to set nav bar on the form and the.

64
00:04:24,680 --> 00:04:28,870
Actual big sidebar in a different shade.

65
00:04:28,880 --> 00:04:31,610
So it's still a dark theme, correct?

66
00:04:31,610 --> 00:04:33,860
But it's a different shade.

67
00:04:33,860 --> 00:04:38,660
So therefore I just created more CSS variables.

68
00:04:38,660 --> 00:04:39,920
So notice.

69
00:04:40,980 --> 00:04:44,760
In here I have background, secondary color.

70
00:04:44,760 --> 00:04:47,580
So what happens when I have a light theme?

71
00:04:47,580 --> 00:04:51,480
I also have distinction between the big sidebar.

72
00:04:52,260 --> 00:04:53,730
On the page, for example.

73
00:04:53,730 --> 00:04:55,070
Now, do you have to do it?

74
00:04:55,080 --> 00:05:02,100
No, I just added because I thought it gave a very nice look to the project, but it's definitely not

75
00:05:02,100 --> 00:05:03,000
mandatory.

76
00:05:03,000 --> 00:05:08,850
So the biggest one is to just understand that we're flipping those values, but this is technically

77
00:05:08,850 --> 00:05:09,600
an extra.

78
00:05:09,600 --> 00:05:16,800
So since I have these CSS variables as well, what can we do when we toggle the dark theme?

79
00:05:16,800 --> 00:05:17,580
Well.

80
00:05:18,270 --> 00:05:19,540
We can flip them as well.

81
00:05:19,560 --> 00:05:21,720
Right Now, what are the values?

82
00:05:21,720 --> 00:05:23,910
Well, we just created more shades.

83
00:05:23,910 --> 00:05:24,430
That's it.

84
00:05:24,450 --> 00:05:30,360
So essentially, instead of having two colors that we're flipping now, we're flipping four of them

85
00:05:30,360 --> 00:05:34,780
now, is it more complex because you have to pretty much check every component?

86
00:05:34,800 --> 00:05:36,330
Yeah, it is a little bit tricky.

87
00:05:36,330 --> 00:05:42,000
So pretty much the more colors you're going to add, the tougher is going to be.

88
00:05:42,330 --> 00:05:43,890
That's something to keep in mind.

89
00:05:43,920 --> 00:05:51,480
Also, since right now you have these CSS variables, unless it's a primary color or it's maybe some

90
00:05:51,480 --> 00:05:52,890
shade of primary color.

91
00:05:52,890 --> 00:05:55,410
In that case, of course it's straight up.

92
00:05:55,410 --> 00:06:00,540
You just use whatever is the CSS variable for the primary color.

93
00:06:00,540 --> 00:06:05,490
For example, in my case, it's primary 500 or 200 and all that.

94
00:06:05,820 --> 00:06:11,940
Unless you have that color, you need to use the CSS variables.

95
00:06:11,940 --> 00:06:16,530
So again, it's background color, it's secondary color and it's a text color.

96
00:06:16,530 --> 00:06:19,840
So remember when we were, for example, setting up.

97
00:06:20,690 --> 00:06:23,090
Um, let's go to a big sidebar.

98
00:06:23,210 --> 00:06:24,020
I believe in here.

99
00:06:24,020 --> 00:06:24,770
We used it.

100
00:06:24,980 --> 00:06:29,750
Remember, for the color, I didn't use just some random white color.

101
00:06:29,780 --> 00:06:32,960
I went with color, and that was equal to text.

102
00:06:32,960 --> 00:06:35,720
Secondary color, because that was my choice.

103
00:06:35,720 --> 00:06:42,470
And also, remember when we talked about the sidebar container, the background, it wasn't some random

104
00:06:42,470 --> 00:06:44,400
white color or gray one.

105
00:06:44,420 --> 00:06:45,860
No, I use this value.

106
00:06:45,860 --> 00:06:47,600
The background secondary color.

107
00:06:47,600 --> 00:06:48,020
Why?

108
00:06:48,020 --> 00:06:50,690
Well, because we have multiple choices in here.

109
00:06:50,690 --> 00:06:54,080
So background secondary color by default is white.

110
00:06:54,110 --> 00:07:00,170
That's why when we have a light theme, the sidebar and nav bar, they both are white.

111
00:07:00,170 --> 00:07:01,010
But.

112
00:07:01,680 --> 00:07:03,090
Notice this one Dark mode.

113
00:07:03,120 --> 00:07:04,780
BG Secondary color.

114
00:07:04,800 --> 00:07:05,880
What is this one?

115
00:07:05,880 --> 00:07:10,710
Well, it's a lighter shade of our main dark mode.

116
00:07:10,710 --> 00:07:11,520
Background color.

117
00:07:11,520 --> 00:07:12,120
Correct.

118
00:07:12,120 --> 00:07:15,870
So what do we do here in dark theme background, secondary color?

119
00:07:15,870 --> 00:07:17,940
Well, we flip it correct.

120
00:07:17,970 --> 00:07:22,110
We flip it to a dark mode background, secondary color.

121
00:07:22,110 --> 00:07:28,410
So what I'm trying to say here is that since we're flipping the modes, it's not just going to be one

122
00:07:28,410 --> 00:07:31,620
value, it's not going to be one hardcoded value.

123
00:07:31,620 --> 00:07:35,910
That's why we use the CSS variable and then depending.

124
00:07:36,600 --> 00:07:38,130
On a theme we have.

125
00:07:38,860 --> 00:07:43,420
In the CSS, we will actually set the value.

126
00:07:43,570 --> 00:07:45,010
Hopefully that is clear.

127
00:07:45,220 --> 00:07:47,920
And now we can move on to the next step.