1
00:00:00,140 --> 00:00:00,530
All right.

2
00:00:00,530 --> 00:00:06,410
And once we have the component in place, once we have the CSS in place, now let's set up the functionality.

3
00:00:06,500 --> 00:00:13,800
And essentially we want to navigate to dashboard layout and we're looking for toggle dark theme.

4
00:00:13,820 --> 00:00:19,830
Remember, that's what we invoke when we click on the component basically on our button.

5
00:00:19,850 --> 00:00:23,420
And let's start by constructing the variable.

6
00:00:24,110 --> 00:00:27,920
So here's what I want to do in the toggle dark theme.

7
00:00:28,280 --> 00:00:34,250
I'm going to create a new variable and I'm going to call this new dark theme, and I'll set it equal

8
00:00:34,250 --> 00:00:37,410
to the opposite of the current value.

9
00:00:37,430 --> 00:00:42,950
So I'm going to go here with is dark theme, but I'll right away set it to the opposite value and then

10
00:00:42,950 --> 00:00:48,350
we're going to go set this dark theme and we're going to provide this new dark theme.

11
00:00:48,350 --> 00:00:56,420
And before you ask, yes, technically you can set up the logic just like we did here in a toggle sidebar.

12
00:00:56,510 --> 00:00:59,060
It's just that we'll use this value.

13
00:00:59,890 --> 00:01:01,000
In two more places.

14
00:01:01,000 --> 00:01:04,599
And I just thought that it's easier if we have a new variable.

15
00:01:04,599 --> 00:01:05,860
And now check it out.

16
00:01:06,040 --> 00:01:07,660
Basically at the moment I click.

17
00:01:08,330 --> 00:01:09,950
I'll be toggling the icon.

18
00:01:09,950 --> 00:01:10,520
Why?

19
00:01:10,520 --> 00:01:16,820
Well, because in our component, we have the logic correct, which essentially checks for the state

20
00:01:16,820 --> 00:01:19,610
value, and depending on that value, displays the icon.

21
00:01:19,610 --> 00:01:21,080
So that's the first step.

22
00:01:21,200 --> 00:01:27,960
Now, up next, we want to add a class, a very specific class to our body element.

23
00:01:27,980 --> 00:01:32,570
So if I take a look at my project, let me navigate to a dashboard.

24
00:01:32,690 --> 00:01:34,940
I'll see over here this body element.

25
00:01:34,940 --> 00:01:40,730
And essentially one of the ways how we can set up the dark mode in our application is by toggling the

26
00:01:40,730 --> 00:01:43,490
class on the body element.

27
00:01:43,520 --> 00:01:51,200
So effectively we want to go back to toggle dark theme then since in React, we can nicely use vanilla

28
00:01:51,200 --> 00:01:54,950
JS We simply can target the body element.

29
00:01:54,950 --> 00:02:02,270
So we go over here with document, then body, then we want to set up a class list property.

30
00:02:02,390 --> 00:02:05,110
And on that property there is a toggle method.

31
00:02:05,120 --> 00:02:11,460
Again, please keep in mind this is vanilla JS It has nothing to do with React and this toggle function

32
00:02:11,460 --> 00:02:12,750
is looking for two things.

33
00:02:12,750 --> 00:02:17,970
It's looking for class and it's also looking for a force, basically a Boolean.

34
00:02:17,970 --> 00:02:21,330
So essentially, if the boolean is going to be true, we're going to add the class.

35
00:02:21,330 --> 00:02:25,590
If not, we're going to remove it Again, this is a very specific class.

36
00:02:25,590 --> 00:02:26,010
Why?

37
00:02:26,010 --> 00:02:29,940
Well, because I already have the logic in the index.

38
00:02:30,060 --> 00:02:34,470
So therefore go with dark theme and then which value we want to use as a boolean.

39
00:02:34,470 --> 00:02:36,030
Well, we have that new dark theme.

40
00:02:36,030 --> 00:02:36,690
Correct.

41
00:02:37,080 --> 00:02:38,730
So let's save this one.

42
00:02:38,730 --> 00:02:40,620
And you'll notice something interesting.

43
00:02:40,710 --> 00:02:44,250
Once we click, we change the colors again.

44
00:02:44,250 --> 00:02:50,970
We will cover the CSS logic in the following videos, so don't worry about it right now.

45
00:02:52,210 --> 00:02:54,270
The main logic here is following.

46
00:02:54,280 --> 00:02:58,780
If I click notice, I have this class and I'm adding this dark theme.

47
00:02:58,780 --> 00:03:02,650
And then once we click again, now we don't have the class.

48
00:03:02,680 --> 00:03:04,480
When we don't have the class.

49
00:03:04,630 --> 00:03:08,410
Of course the colors are back to the light theme.

50
00:03:08,410 --> 00:03:13,480
And then if the class is present, then of course we display the dark theme.

51
00:03:13,720 --> 00:03:19,810
Now everything works well, but check it out once I refresh, even though I just had the dark theme,

52
00:03:20,140 --> 00:03:21,490
I'm back to the light one.

53
00:03:21,490 --> 00:03:22,000
Why?

54
00:03:22,030 --> 00:03:23,860
Well, because we're not persisting this value.

55
00:03:23,860 --> 00:03:26,650
Of course, by default, the dark theme is false.

56
00:03:26,650 --> 00:03:29,320
And that's why we right away start with the light theme.

57
00:03:29,500 --> 00:03:32,380
Now, in order to change that, we want to save this value.

58
00:03:32,380 --> 00:03:32,920
Where?

59
00:03:32,950 --> 00:03:39,400
Well, we have a local storage, so we're going to go here with local storage set item, and then we

60
00:03:39,400 --> 00:03:41,380
want to come up with the value.

61
00:03:41,380 --> 00:03:43,300
In my case, it's going to be a dark theme.

62
00:03:43,300 --> 00:03:48,080
And then as far as which value, well again, we have this new dark theme.

63
00:03:48,100 --> 00:03:50,560
Now we still need to access it.

64
00:03:50,770 --> 00:03:57,860
So at the moment we'll just see that we nicely save this value pretty much every time we click.

65
00:03:57,860 --> 00:04:04,100
But again, since the default value is false, even though in the local storage I have this true.

66
00:04:04,280 --> 00:04:05,720
Well, nothing is happening.

67
00:04:05,720 --> 00:04:06,350
Correct.

68
00:04:06,590 --> 00:04:12,350
So in order to change that, we need to access this value from the local storage.

69
00:04:12,440 --> 00:04:13,970
But here's the kicker.

70
00:04:14,270 --> 00:04:20,060
Because of the structure of our application, there's going to be gotcha if we try to access it here

71
00:04:20,060 --> 00:04:22,220
directly in the dashboard layout.

72
00:04:22,220 --> 00:04:23,780
So let's do it together.

73
00:04:23,810 --> 00:04:28,220
Don't worry, we will reuse these lines of code and eventually we'll set it in the app.

74
00:04:28,220 --> 00:04:28,580
JSX.

75
00:04:29,150 --> 00:04:35,360
I just want to showcase what is going to be the issue if we try to do that in the dashboard and effectively,

76
00:04:35,360 --> 00:04:40,970
I just want to set up a function check default theme, which is going to look for the value in a local

77
00:04:40,970 --> 00:04:43,490
storage and then depending on that value.

78
00:04:43,990 --> 00:04:50,410
We will automatically add that dark theme and also we'll set that value as our state value.

79
00:04:50,410 --> 00:04:51,820
So let's try this one out.

80
00:04:51,820 --> 00:04:54,070
I'm going to go with const check.

81
00:04:54,840 --> 00:04:57,900
And let's call it default theme.

82
00:04:58,200 --> 00:04:59,520
That's my function.

83
00:04:59,520 --> 00:05:02,040
What is the first thing we want to do inside of this function?

84
00:05:02,040 --> 00:05:03,000
Well, we.

85
00:05:03,820 --> 00:05:10,030
We'll come up with a variable is dark theme and we'll set it equal to local storage In order to access

86
00:05:10,030 --> 00:05:12,550
the item we want to go get item.

87
00:05:12,670 --> 00:05:15,010
And the item name is Dark theme.

88
00:05:15,010 --> 00:05:19,210
And remember, we're saving this as a string, not as a Boolean.

89
00:05:19,210 --> 00:05:20,310
Why is that important?

90
00:05:20,320 --> 00:05:26,440
Well, because we want to check if it's equal to true, not to true, but actually in quotation marks.

91
00:05:26,440 --> 00:05:30,070
Because again, we're getting back this one as a string.

92
00:05:30,070 --> 00:05:36,430
And once we have this logic in place now, of course, we want to use this value and essentially.

93
00:05:37,140 --> 00:05:42,390
Again, depending on the is dark theme, either add it to the.

94
00:05:43,000 --> 00:05:45,700
Body element or remove it.

95
00:05:45,730 --> 00:05:51,820
Again, the difference right now is that we're going to do that when this component basically loads

96
00:05:51,820 --> 00:05:54,030
when we mount this component.

97
00:05:54,040 --> 00:05:57,550
So in this case, we're doing it when we click on a button.

98
00:05:58,410 --> 00:06:04,250
But this function is going to run when the actual component mounts.

99
00:06:04,260 --> 00:06:06,120
So we simply want to grab.

100
00:06:06,860 --> 00:06:09,740
This line of code and we want to change it around a little bit.

101
00:06:09,770 --> 00:06:11,510
It's not going to be new dark theme.

102
00:06:11,510 --> 00:06:13,310
There is no such variable.

103
00:06:13,340 --> 00:06:18,590
We'll go with is dark theme and then what's the last thing we want to do from this function?

104
00:06:18,590 --> 00:06:20,300
Return is dark theme.

105
00:06:20,600 --> 00:06:24,140
Let's save it and then let's look for our is.

106
00:06:24,560 --> 00:06:25,400
Dark theme.

107
00:06:26,350 --> 00:06:27,300
State value.

108
00:06:27,300 --> 00:06:29,580
And then let's invoke the function.

109
00:06:29,580 --> 00:06:32,730
And if everything is correct, we right away should.

110
00:06:33,780 --> 00:06:36,060
Get the correct value from the local storage.

111
00:06:36,060 --> 00:06:38,010
So let me navigate to the big screen.

112
00:06:38,010 --> 00:06:38,910
It's going to be easier.

113
00:06:38,910 --> 00:06:41,730
And notice dark theme is equal to true.

114
00:06:41,730 --> 00:06:48,630
So of course once I refresh, I right away add the dark theme class and of course I get the dark colors,

115
00:06:48,630 --> 00:06:50,580
but there is a gotcha.

116
00:06:50,610 --> 00:06:58,290
Remember we also have the landing page, we have the login, the register as well as the error one.

117
00:06:58,290 --> 00:07:02,850
And at the moment we're only toggling this theme on a dashboard.

118
00:07:02,850 --> 00:07:11,010
So a better approach is actually to invoke this check default theme when our application mounts.

119
00:07:11,400 --> 00:07:13,140
Where does that happen?

120
00:07:13,140 --> 00:07:17,670
Well, it's happening in the app JSX.

121
00:07:17,880 --> 00:07:20,760
So like I said, we'll keep all of this logic.

122
00:07:20,760 --> 00:07:21,840
Nothing changes.

123
00:07:21,840 --> 00:07:25,560
We're going to change the location where we invoke it.

124
00:07:25,560 --> 00:07:27,360
So let me cut this one out.

125
00:07:28,520 --> 00:07:32,720
First of all, then we're going to go to App JS.

126
00:07:33,050 --> 00:07:36,260
Again, that's our main pretty much entry point.

127
00:07:36,730 --> 00:07:45,610
And then in between the imports and the Create browser router, I'm going to set up my function.

128
00:07:45,610 --> 00:07:50,800
I want to right away invoke it and set it equal to some kind of variable.

129
00:07:50,800 --> 00:07:53,770
In my case, I'm going to call this is dark theme.

130
00:07:54,850 --> 00:07:55,810
Enabled.

131
00:07:57,710 --> 00:08:03,380
And let's invoke check default theme and then let's keep on scrolling.

132
00:08:03,590 --> 00:08:12,680
And essentially in here, we want to pass it to a dashboard layout because I still want to set it as

133
00:08:12,680 --> 00:08:13,820
the value here.

134
00:08:13,910 --> 00:08:14,560
Right.

135
00:08:14,570 --> 00:08:20,090
But the difference right now is going to be that right away I'll check the value.

136
00:08:20,090 --> 00:08:25,730
And if it's true, then it's going to be added to all of the pages, not just the.

137
00:08:26,490 --> 00:08:27,200
Dashboard one.

138
00:08:27,210 --> 00:08:28,110
Hopefully that is clear.

139
00:08:28,110 --> 00:08:31,710
So let me just find where is my dashboard layout?

140
00:08:31,950 --> 00:08:33,600
I'll use the same name.

141
00:08:33,840 --> 00:08:34,500
Essentially.

142
00:08:34,500 --> 00:08:37,289
I'll just say is dark theme enabled?

143
00:08:37,289 --> 00:08:43,500
That's going to be my prop and I'll set it equal to my variable.

144
00:08:44,330 --> 00:08:50,600
And then in a dashboard layout, let's access it and set it as our default value.

145
00:08:50,630 --> 00:08:52,310
So let's go back over here.

146
00:08:53,350 --> 00:08:54,460
Let's use the value.

147
00:08:54,460 --> 00:08:57,550
And again, in the dashboard, nothing is going to change.

148
00:08:58,290 --> 00:09:04,020
The beauty right now is that if, let's say I go to a different page.

149
00:09:04,970 --> 00:09:06,410
I'm going to go to register.

150
00:09:06,410 --> 00:09:07,650
It's going to be the same deal.

151
00:09:07,670 --> 00:09:15,350
We'll still have this dark theme even if we refresh so effectively once the.

152
00:09:16,150 --> 00:09:19,660
User comes to my application, signs up.

153
00:09:20,150 --> 00:09:24,710
And then chooses the dark theme whenever he or she comes back.

154
00:09:24,710 --> 00:09:31,280
We'll have this value in local storage and regardless of the page, and most likely it's going to be

155
00:09:31,280 --> 00:09:37,940
the landing page that he or she sees when they come back to the application will still have this dark

156
00:09:37,940 --> 00:09:38,440
theme.

157
00:09:38,450 --> 00:09:45,230
Again, technically not a big deal if you want to keep other pages as light theme, just keep this logic

158
00:09:45,230 --> 00:09:47,780
over here in the dashboard layout, but hopefully it's clear.

159
00:09:47,780 --> 00:09:51,950
Why do we want to set this one up in the App.jsx?

160
00:09:52,280 --> 00:09:59,210
Basically when our application loads and the reason for that is because then the dark theme is going

161
00:09:59,210 --> 00:10:04,580
to be set for all of the pages, not just the dashboard layout, but rest of them.

162
00:10:04,580 --> 00:10:10,040
And in the upcoming video, essentially I'll showcase how we can achieve.

163
00:10:10,910 --> 00:10:14,390
The dark theme as far as the CSS is concerned.