1
00:00:01,320 --> 00:00:02,310
‫Okay.

2
00:00:02,310 --> 00:00:06,420
‫So the next feature on our list of requirements

3
00:00:06,420 --> 00:00:10,020
‫is that the application needs a dark mode.

4
00:00:10,020 --> 00:00:14,130
‫And so let's now use the power of CSS variables

5
00:00:14,130 --> 00:00:18,183
‫in order to implement ourselves a nice dark mode.

6
00:00:20,079 --> 00:00:21,510
‫But before we go do that,

7
00:00:21,510 --> 00:00:24,090
‫let's actually fix that small error

8
00:00:24,090 --> 00:00:26,910
‫that we had in the previous lecture.

9
00:00:26,910 --> 00:00:30,120
‫So remember how there, we actually wanted to

10
00:00:30,120 --> 00:00:35,120
‫directly set the new updated user into the React Query cash.

11
00:00:35,490 --> 00:00:39,900
‫So instead of invalidating like here, because with that

12
00:00:39,900 --> 00:00:44,493
‫we then would have the image immediately appear up here.

13
00:00:45,510 --> 00:00:48,210
‫Now there are two problems actually right here.

14
00:00:48,210 --> 00:00:50,790
‫And the first one is that the Query key

15
00:00:50,790 --> 00:00:54,960
‫is not just a string, but it actually needs to be an array.

16
00:00:54,960 --> 00:00:58,350
‫So as I've mentioned, actually many times before,

17
00:00:58,350 --> 00:01:01,350
‫but here I somehow forgot that.

18
00:01:01,350 --> 00:01:05,010
‫And then here in the API auth,

19
00:01:05,010 --> 00:01:07,560
‫So in this function that we wrote,

20
00:01:07,560 --> 00:01:11,943
‫also in the previous lecture, here, we forgot to await.

21
00:01:14,220 --> 00:01:17,220
‫And so therefore, then here this updated user

22
00:01:17,220 --> 00:01:20,610
‫that was returned was always just undefined

23
00:01:20,610 --> 00:01:22,830
‫because we would return this value

24
00:01:22,830 --> 00:01:26,130
‫before this function here had even run.

25
00:01:26,130 --> 00:01:28,350
‫And so with these two changes

26
00:01:28,350 --> 00:01:31,413
‫let's now reload and then try this again.

27
00:01:32,910 --> 00:01:35,010
‫So let's now try my real name

28
00:01:35,010 --> 00:01:37,083
‫and some other image.

29
00:01:38,490 --> 00:01:42,333
‫Maybe, yeah, cabin two.

30
00:01:43,470 --> 00:01:46,953
‫And so let's see if now this updates here immediately.

31
00:01:49,080 --> 00:01:51,330
‫And beautiful.

32
00:01:51,330 --> 00:01:54,600
‫So notice how that changed right away.

33
00:01:54,600 --> 00:01:56,973
‫And so that was exactly our goal.

34
00:01:57,990 --> 00:01:59,280
‫Nice.

35
00:01:59,280 --> 00:02:01,650
‫So with this, we finished this part.

36
00:02:01,650 --> 00:02:03,060
‫Let's delete this.

37
00:02:03,060 --> 00:02:04,833
‫And so this works great.

38
00:02:06,540 --> 00:02:07,373
‫And all right.

39
00:02:07,373 --> 00:02:10,500
‫And so now let's turn our attention to that dark mode

40
00:02:10,500 --> 00:02:13,470
‫that I was talking about earlier.

41
00:02:13,470 --> 00:02:18,470
‫So in the styles.CSS file that you got in the starter files,

42
00:02:19,140 --> 00:02:21,820
‫you should have had these

43
00:02:23,370 --> 00:02:26,670
‫CSS variables for dark mode.

44
00:02:26,670 --> 00:02:29,520
‫So hopefully you copied them right here

45
00:02:29,520 --> 00:02:33,360
‫into this global styles file when we did that.

46
00:02:33,360 --> 00:02:37,590
‫And if not, you can always just go back to the starter files

47
00:02:37,590 --> 00:02:40,440
‫and then open up styles.CSS,

48
00:02:40,440 --> 00:02:42,633
‫and there you will find these.

49
00:02:43,950 --> 00:02:47,910
‫Now what we want to do now in order to implement dark mode

50
00:02:47,910 --> 00:02:50,580
‫is to set different CSS variables

51
00:02:50,580 --> 00:02:54,483
‫for different class names on the HTML element.

52
00:02:55,860 --> 00:03:00,630
‫So basically right here in our elements,

53
00:03:00,630 --> 00:03:03,240
‫we will have one class for light mode

54
00:03:03,240 --> 00:03:05,460
‫and one class for dark mode.

55
00:03:05,460 --> 00:03:07,950
‫And so then according to that class

56
00:03:07,950 --> 00:03:10,983
‫these different CSS variables will apply.

57
00:03:12,300 --> 00:03:14,883
‫So let's grab them here.

58
00:03:16,350 --> 00:03:18,633
‫So all of this.

59
00:03:20,280 --> 00:03:25,280
‫And so notice how the CSS variables are defined at the root

60
00:03:25,530 --> 00:03:29,130
‫which is actually exactly this element.

61
00:03:29,130 --> 00:03:31,920
‫But now we want these ones here to apply

62
00:03:31,920 --> 00:03:34,860
‫only when there is a light mode class.

63
00:03:34,860 --> 00:03:36,840
‫And then the ones that we just copied

64
00:03:36,840 --> 00:03:38,733
‫with a dark mode class.

65
00:03:40,080 --> 00:03:44,670
‫Now these blue ones here will actually be the same,

66
00:03:44,670 --> 00:03:48,213
‫but then everything else here is actually gonna change.

67
00:03:49,590 --> 00:03:52,503
‫So the border radius will also not change.

68
00:03:54,330 --> 00:03:58,260
‫But in any case, let's now write this and,

69
00:03:58,260 --> 00:04:01,230
‫which basically means the current selector

70
00:04:01,230 --> 00:04:05,403
‫and then with the class of dark mode.

71
00:04:08,070 --> 00:04:09,963
‫So then let's place that there.

72
00:04:12,660 --> 00:04:17,660
‫So for some reason this didn't get prettified by Prettier.

73
00:04:18,390 --> 00:04:22,710
‫But anyway, let's now then place these ones here,

74
00:04:22,710 --> 00:04:27,150
‫again with the end, which is basically just this root,

75
00:04:27,150 --> 00:04:31,953
‫and then with the light mode class.

76
00:04:34,620 --> 00:04:39,620
‫And so all of this here should be inside that.

77
00:04:41,790 --> 00:04:42,873
‫Now here.

78
00:04:46,920 --> 00:04:50,373
‫Actually let's also place this one into light mode.

79
00:04:51,360 --> 00:04:52,323
‫So,

80
00:04:54,150 --> 00:04:55,263
‫that's right here.

81
00:04:56,250 --> 00:05:00,540
‫Because in dark mode we will then make all our images here

82
00:05:00,540 --> 00:05:04,350
‫with a bit less opacity and give them some gray scale

83
00:05:04,350 --> 00:05:08,343
‫so that they don't look so bright on a dark background.

84
00:05:10,530 --> 00:05:11,520
‫Now, all right.

85
00:05:11,520 --> 00:05:15,780
‫Let's maybe grab these blue brand colors

86
00:05:15,780 --> 00:05:17,343
‫and place them down here.

87
00:05:18,570 --> 00:05:21,300
‫And so these styles here, they stay the same.

88
00:05:21,300 --> 00:05:24,750
‫So this color and also the border radius.

89
00:05:24,750 --> 00:05:28,173
‫But then for the dark mode we have these colors.

90
00:05:29,700 --> 00:05:31,140
‫So not only these grays,

91
00:05:31,140 --> 00:05:34,203
‫but also these shadows and this backdrop.

92
00:05:35,130 --> 00:05:37,803
‫And for light mode, we have this.

93
00:05:39,000 --> 00:05:40,080
‫Now, all right?

94
00:05:40,080 --> 00:05:42,970
‫So again this selector here is basically the same

95
00:05:44,310 --> 00:05:45,630
‫as writing this.

96
00:05:45,630 --> 00:05:48,720
‫And so that then means that it needs to be this selector

97
00:05:48,720 --> 00:05:51,750
‫and at the same time the light mode.

98
00:05:51,750 --> 00:05:54,363
‫So no space, but really this.

99
00:05:55,980 --> 00:05:58,290
‫And actually we also want to apply this

100
00:05:58,290 --> 00:06:00,240
‫when there is no class at all.

101
00:06:00,240 --> 00:06:03,510
‫So basically making this the default.

102
00:06:03,510 --> 00:06:05,730
‫And so we can just write this.

103
00:06:05,730 --> 00:06:09,330
‫And so then this is basically just regular CSS,

104
00:06:09,330 --> 00:06:12,303
‫just with the added thing of nesting.

105
00:06:13,290 --> 00:06:17,130
‫Now I'm not sure why this is not getting formatted,

106
00:06:17,130 --> 00:06:20,370
‫so maybe we have some error in our code.

107
00:06:20,370 --> 00:06:23,400
‫Let's see. But maybe not.

108
00:06:23,400 --> 00:06:28,400
‫And we can also check out here the output from Prettier.

109
00:06:31,860 --> 00:06:34,680
‫And so everything seems to work fine.

110
00:06:34,680 --> 00:06:39,680
‫So maybe it just cannot really format here this kind of CSS.

111
00:06:40,290 --> 00:06:43,920
‫but that's no problem at all as long as it works.

112
00:06:43,920 --> 00:06:47,760
‫And we can actually immediately check if it works

113
00:06:47,760 --> 00:06:50,733
‫by manually adding that class here.

114
00:06:52,650 --> 00:06:55,780
‫So we can write "class" and then

115
00:06:58,177 --> 00:06:59,397
‫"dark mode."

116
00:07:00,660 --> 00:07:03,030
‫And beautiful.

117
00:07:03,030 --> 00:07:05,580
‫So here you are seeing our dark mode

118
00:07:05,580 --> 00:07:07,380
‫for the very first time.

119
00:07:07,380 --> 00:07:11,250
‫And so again, that is working because now

120
00:07:11,250 --> 00:07:14,070
‫all the CSS variables that we had before

121
00:07:14,070 --> 00:07:16,800
‫were replaced with these ones.

122
00:07:16,800 --> 00:07:20,070
‫And since we are defining all of the colors here

123
00:07:20,070 --> 00:07:24,240
‫all over the application based on these CSS variables,

124
00:07:24,240 --> 00:07:27,690
‫then all we have to do to implement our dark mode

125
00:07:27,690 --> 00:07:30,930
‫is to switch these CSS variables.

126
00:07:30,930 --> 00:07:35,370
‫And again, we switch them by simply changing the class here.

127
00:07:35,370 --> 00:07:38,040
‫So if we write light mode.

128
00:07:38,040 --> 00:07:41,643
‫then we are back to these colors right here.

129
00:07:42,540 --> 00:07:43,890
‫Now, all right.

130
00:07:43,890 --> 00:07:48,390
‫And now of course we want a way of changing this class

131
00:07:48,390 --> 00:07:50,520
‫right here in our application.

132
00:07:50,520 --> 00:07:53,910
‫And so for that we will add a button here.

133
00:07:53,910 --> 00:07:56,763
‫And let's actually start by doing that.

134
00:07:57,750 --> 00:08:01,560
‫So right here in our UI folder,

135
00:08:01,560 --> 00:08:06,010
‫let's add a component called "dark mode toggle."

136
00:08:11,730 --> 00:08:16,020
‫And then here all we are going to return is another one

137
00:08:16,020 --> 00:08:18,753
‫of those button icons.

138
00:08:22,560 --> 00:08:27,560
‫And then for now, here, let's just place this outline moon

139
00:08:31,200 --> 00:08:33,450
‫just like this, basically showing

140
00:08:33,450 --> 00:08:36,330
‫that we want to switch to dark mode.

141
00:08:36,330 --> 00:08:39,510
‫So for now, of course this button won't do anything,

142
00:08:39,510 --> 00:08:43,383
‫but let's still add it here to our header menu.

143
00:08:44,610 --> 00:08:45,443
‫So here

144
00:08:46,890 --> 00:08:49,540
‫another list item, and then here

145
00:08:50,850 --> 00:08:52,590
‫we add that toggle.

146
00:08:52,590 --> 00:08:56,223
‫And so then there we get that nice additional button.

147
00:08:57,690 --> 00:08:58,620
‫Now, okay.

148
00:08:58,620 --> 00:09:00,300
‫But now of course it is time

149
00:09:00,300 --> 00:09:02,673
‫to actually make this button work.

150
00:09:03,720 --> 00:09:06,810
‫Now we need the information whether dark mode

151
00:09:06,810 --> 00:09:11,580
‫is activated or not in multiple places in the application.

152
00:09:11,580 --> 00:09:13,620
‫So not just here in this toggle,

153
00:09:13,620 --> 00:09:16,440
‫but for example also in this logo.

154
00:09:16,440 --> 00:09:20,370
‫So we will have a different logo when we are in dark mode.

155
00:09:20,370 --> 00:09:23,070
‫So basically what this means is that

156
00:09:23,070 --> 00:09:25,500
‫we want things to change on the screen

157
00:09:25,500 --> 00:09:27,780
‫whenever we change to dark mode.

158
00:09:27,780 --> 00:09:30,300
‫Not just the colors themselves,

159
00:09:30,300 --> 00:09:33,300
‫but really the entire state of the application

160
00:09:33,300 --> 00:09:36,000
‫needs to change so that we can then also

161
00:09:36,000 --> 00:09:38,430
‫display a different icon here.

162
00:09:38,430 --> 00:09:41,370
‫So that means that we need a state variable

163
00:09:41,370 --> 00:09:44,130
‫and that state variable needs to be accessible

164
00:09:44,130 --> 00:09:47,460
‫in the entire application because, again,

165
00:09:47,460 --> 00:09:50,940
‫we actually need that information both here

166
00:09:50,940 --> 00:09:52,650
‫and here in the logo.

167
00:09:52,650 --> 00:09:55,230
‫And maybe in the future we might even need it

168
00:09:55,230 --> 00:09:57,000
‫in some other places.

169
00:09:57,000 --> 00:10:00,750
‫And therefore let's now create a new context where

170
00:10:00,750 --> 00:10:02,700
‫we will store that state

171
00:10:02,700 --> 00:10:06,330
‫and then provide it to our entire application tree.

172
00:10:06,330 --> 00:10:09,420
‫So this is in fact gonna be the only piece

173
00:10:09,420 --> 00:10:13,590
‫of global state that we're gonna need to manage ourselves

174
00:10:13,590 --> 00:10:16,800
‫because all the other state, as we already know,

175
00:10:16,800 --> 00:10:19,320
‫is being handled by React Query.

176
00:10:19,320 --> 00:10:23,790
‫So all the remote state, which is usually most of the state

177
00:10:23,790 --> 00:10:27,000
‫and most of the global state that we're gonna have

178
00:10:27,000 --> 00:10:28,620
‫in an application.

179
00:10:28,620 --> 00:10:32,550
‫But again, here we now actually do have one

180
00:10:32,550 --> 00:10:34,530
‫local global state.

181
00:10:34,530 --> 00:10:36,990
‫And so for that, let's now create,

182
00:10:36,990 --> 00:10:39,423
‫as I mentioned, a context.

183
00:10:40,650 --> 00:10:44,700
‫So we actually don't even have a context folder here yet.

184
00:10:44,700 --> 00:10:46,500
‫So let's create that.

185
00:10:46,500 --> 00:10:51,150
‫So new folder "context."

186
00:10:51,150 --> 00:10:56,150
‫And then in there let's create our dark mode context.JSX.

187
00:11:01,590 --> 00:11:05,310
‫And so now in here we will follow exactly the same recipe

188
00:11:05,310 --> 00:11:08,250
‫that we have learned about before.

189
00:11:08,250 --> 00:11:12,120
‫So we will start by creating a new context.

190
00:11:12,120 --> 00:11:16,890
‫So the dark mode context

191
00:11:16,890 --> 00:11:21,890
‫with create context from React.

192
00:11:22,530 --> 00:11:26,160
‫And then here we will create a component

193
00:11:26,160 --> 00:11:28,980
‫which will be a custom provider.

194
00:11:28,980 --> 00:11:33,910
‫So a dark mode provider which will receive

195
00:11:35,370 --> 00:11:36,543
‫the children prompt.

196
00:11:37,410 --> 00:11:42,410
‫And then this is where we will actually store our state.

197
00:11:42,750 --> 00:11:45,630
‫So is dark mode

198
00:11:45,630 --> 00:11:49,953
‫and set is dark mode.

199
00:11:52,170 --> 00:11:55,830
‫Now here we could of course use the use state hook

200
00:11:55,830 --> 00:11:58,860
‫that we have used so, so many times.

201
00:11:58,860 --> 00:12:02,070
‫But instead, let's actually use that custom hook

202
00:12:02,070 --> 00:12:06,393
‫that we created earlier, which is use local storage state.

203
00:12:08,010 --> 00:12:09,453
‫So use local.

204
00:12:10,530 --> 00:12:13,173
‫And well, I think we have it here.

205
00:12:14,310 --> 00:12:15,240
‫Yeah.

206
00:12:15,240 --> 00:12:17,790
‫So this custom hook we built it earlier

207
00:12:17,790 --> 00:12:19,770
‫in some other part of the course.

208
00:12:19,770 --> 00:12:23,790
‫And so I just placed that here in order to reuse it.

209
00:12:23,790 --> 00:12:26,250
‫So this basically sets the state

210
00:12:26,250 --> 00:12:30,003
‫and then also synchronizes it with the local storage.

211
00:12:31,830 --> 00:12:36,153
‫So use local storage state.

212
00:12:38,310 --> 00:12:40,713
‫Let's bring that in then, as well.

213
00:12:41,910 --> 00:12:43,083
‫Let's just copy that.

214
00:12:46,253 --> 00:12:47,843
‫And then from hooks,

215
00:12:51,660 --> 00:12:52,803
‫and there we go.

216
00:12:53,790 --> 00:12:57,360
‫So the signature of this hook is very similar

217
00:12:57,360 --> 00:13:02,360
‫to the use state hook, and so it returns the same things

218
00:13:02,730 --> 00:13:05,340
‫and it also needs an initial value.

219
00:13:05,340 --> 00:13:08,340
‫So let's for now make it false.

220
00:13:08,340 --> 00:13:11,820
‫And then we also need to give it the name

221
00:13:11,820 --> 00:13:13,743
‫of the key in local storage.

222
00:13:14,610 --> 00:13:17,883
‫So let's just reuse "is dark mode" here.

223
00:13:19,680 --> 00:13:23,950
‫Okay. And now here, let's then actually return

224
00:13:24,960 --> 00:13:28,923
‫the dark mode context.provider,

225
00:13:32,880 --> 00:13:35,460
‫which will then return to children.

226
00:13:35,460 --> 00:13:38,580
‫And then as always, we pass in the value.

227
00:13:38,580 --> 00:13:42,333
‫So a new object with is dark mode.

228
00:13:43,260 --> 00:13:47,913
‫And then let's also actually create here a custom function.

229
00:13:50,550 --> 00:13:54,633
‫So just toggle dark mode.

230
00:13:57,194 --> 00:14:00,163
‫And so all this will do is set is dark mode

231
00:14:03,060 --> 00:14:04,533
‫basically to the opposite.

232
00:14:08,010 --> 00:14:10,470
‫And so then this is the event handler function

233
00:14:10,470 --> 00:14:13,653
‫that we pass into our context.

234
00:14:15,330 --> 00:14:19,440
‫So this is the first part of that recipe that I mentioned.

235
00:14:19,440 --> 00:14:20,970
‫So that's the provider.

236
00:14:20,970 --> 00:14:25,770
‫And then remember how we also always then create

237
00:14:25,770 --> 00:14:27,540
‫our custom hook here.

238
00:14:27,540 --> 00:14:30,480
‫So use dark mode, which then basically

239
00:14:30,480 --> 00:14:33,783
‫directly consumes that context.

240
00:14:35,490 --> 00:14:40,173
‫So we store that in context with the use context hook.

241
00:14:42,420 --> 00:14:46,203
‫So dark mode context.

242
00:14:47,640 --> 00:14:49,800
‫And then here, let's just make sure

243
00:14:49,800 --> 00:14:53,493
‫that this hook is always used in the right place.

244
00:14:54,420 --> 00:14:59,420
‫So if this is undefined, then you want to throw a new error.

245
00:15:02,880 --> 00:15:07,880
‫Dark mode context was used outside of dark mode provider.

246
00:15:16,170 --> 00:15:18,090
‫And if that doesn't happen,

247
00:15:18,090 --> 00:15:21,960
‫then we can just return our context value.

248
00:15:21,960 --> 00:15:26,960
‫And then in the end we just export the dark mode provider.

249
00:15:26,970 --> 00:15:29,430
‫So not the context, but the provider.

250
00:15:29,430 --> 00:15:32,493
‫And then use dark mode as well.

251
00:15:33,420 --> 00:15:36,300
‫Now, okay, but that's actually not all

252
00:15:36,300 --> 00:15:39,690
‫because all this does is to set the state.

253
00:15:39,690 --> 00:15:43,740
‫So that's already useful, but it doesn't really change

254
00:15:43,740 --> 00:15:46,050
‫the application here to dark mode.

255
00:15:46,050 --> 00:15:47,970
‫Because remember for that

256
00:15:47,970 --> 00:15:52,140
‫we actually need to add these classes here, right?

257
00:15:52,140 --> 00:15:54,480
‫But let me show you what I mean by that.

258
00:15:54,480 --> 00:15:58,710
‫And let's start by using this a new context

259
00:15:58,710 --> 00:16:02,670
‫and this new state here as it is right now.

260
00:16:02,670 --> 00:16:06,270
‫So let's come right here to the dark mode toggle.

261
00:16:06,270 --> 00:16:08,320
‫And then here we can

262
00:16:10,050 --> 00:16:12,120
‫use all those values.

263
00:16:12,120 --> 00:16:16,620
‫So we can use is dark mode

264
00:16:16,620 --> 00:16:20,133
‫and toggle dark mode.

265
00:16:21,120 --> 00:16:26,120
‫And we get that from use dark mode that we just created.

266
00:16:27,630 --> 00:16:29,970
‫And of course that's not going to work

267
00:16:29,970 --> 00:16:34,970
‫because first we need to actually provide our provider.

268
00:16:35,730 --> 00:16:37,800
‫So now we get exactly that error message

269
00:16:37,800 --> 00:16:39,510
‫that we specified earlier.

270
00:16:39,510 --> 00:16:43,230
‫So we use this context outside of the provider.

271
00:16:43,230 --> 00:16:48,230
‫And so let's start by adding that here to the entire tree.

272
00:16:48,510 --> 00:16:50,553
‫So maybe even right here.

273
00:16:51,450 --> 00:16:56,450
‫So dark mode provider and then the closing tag

274
00:16:57,960 --> 00:17:01,113
‫at the very end of the tree.

275
00:17:03,720 --> 00:17:04,773
‫All right.

276
00:17:06,000 --> 00:17:07,353
‫And so let's go back.

277
00:17:09,180 --> 00:17:13,080
‫And then here is where we add that toggle dark mode

278
00:17:13,080 --> 00:17:14,373
‫to the on click prompt.

279
00:17:17,250 --> 00:17:21,540
‫And then here we use the information,

280
00:17:21,540 --> 00:17:23,670
‫whether we have dark mode or not

281
00:17:23,670 --> 00:17:25,593
‫to display a different icon.

282
00:17:26,490 --> 00:17:31,050
‫So if we are in dark mode, we want to change to light mode.

283
00:17:31,050 --> 00:17:33,963
‫And so let's use a different icon here,

284
00:17:35,220 --> 00:17:38,793
‫outline, and then let's use the sun here.

285
00:17:41,130 --> 00:17:42,393
‫Not like this.

286
00:17:43,410 --> 00:17:44,463
‫But there we go.

287
00:17:45,360 --> 00:17:46,293
‫So let's see.

288
00:17:47,340 --> 00:17:50,430
‫And indeed that is already working

289
00:17:50,430 --> 00:17:53,910
‫so we can toggle now between these two states.

290
00:17:53,910 --> 00:17:57,780
‫And so let's do the same thing here also with the logo.

291
00:17:57,780 --> 00:18:01,113
‫So I mentioned that there, we also need that state.

292
00:18:02,100 --> 00:18:03,693
‫So let's come there.

293
00:18:05,100 --> 00:18:07,293
‫And then here we do the same thing.

294
00:18:08,340 --> 00:18:12,210
‫So is dark mode.

295
00:18:12,210 --> 00:18:15,603
‫So that's all we need right here.

296
00:18:18,300 --> 00:18:21,120
‫And then here, let's define the image source

297
00:18:21,120 --> 00:18:25,290
‫based on whether there is dark mode or not.

298
00:18:25,290 --> 00:18:27,390
‫So if so, you will have one image

299
00:18:27,390 --> 00:18:30,393
‫and otherwise we will have this one.

300
00:18:34,920 --> 00:18:35,760
‫All right.

301
00:18:35,760 --> 00:18:39,870
‫And then this other one, I think it's just called logo dark.

302
00:18:39,870 --> 00:18:42,330
‫So that would make sense, right?

303
00:18:42,330 --> 00:18:43,493
‫And so there it is.

304
00:18:44,910 --> 00:18:49,910
‫So logo dark, and then here we just use that.

305
00:18:54,870 --> 00:18:58,440
‫And so indeed the logo now looks a bit different.

306
00:18:58,440 --> 00:18:59,910
‫And if we toggle back,

307
00:18:59,910 --> 00:19:03,033
‫then notice how at least the text here changes.

308
00:19:04,320 --> 00:19:08,850
‫So these two components now respond to the dark mode state

309
00:19:08,850 --> 00:19:11,640
‫but now comes the time where we then need to

310
00:19:11,640 --> 00:19:15,540
‫actually also change here this class name.

311
00:19:15,540 --> 00:19:20,540
‫And so let's go back to our context here

312
00:19:20,700 --> 00:19:23,073
‫and do that actually right here.

313
00:19:24,390 --> 00:19:28,440
‫So for that we can use an effect.

314
00:19:28,440 --> 00:19:29,763
‫Let's maybe do that here.

315
00:19:31,980 --> 00:19:33,963
‫So use effect.

316
00:19:38,220 --> 00:19:41,550
‫Which should basically run each time

317
00:19:41,550 --> 00:19:44,493
‫that the is dark mode changes.

318
00:19:46,890 --> 00:19:49,020
‫And now this is very easy.

319
00:19:49,020 --> 00:19:50,470
‫So if

320
00:19:51,660 --> 00:19:53,703
‫is dark mode,

321
00:19:55,080 --> 00:19:58,350
‫then let's do some dumb manipulation here.

322
00:19:58,350 --> 00:20:00,183
‫So document.documentElement,

323
00:20:01,680 --> 00:20:04,680
‫which is exactly that root element.

324
00:20:04,680 --> 00:20:06,580
‫And then on the class list

325
00:20:07,860 --> 00:20:12,860
‫we can now manually add that class.

326
00:20:13,080 --> 00:20:16,083
‫So dark mode, in this case.

327
00:20:17,400 --> 00:20:18,400
‫And we remove

328
00:20:21,300 --> 00:20:24,753
‫then the class of light mode.

329
00:20:25,980 --> 00:20:28,590
‫And immediately you see it working

330
00:20:28,590 --> 00:20:32,430
‫'cause we are actually right now in dark mode.

331
00:20:32,430 --> 00:20:35,523
‫And so this is already doing its job.

332
00:20:38,760 --> 00:20:40,443
‫Now let's just do the opposite.

333
00:20:41,430 --> 00:20:43,120
‫So else we add

334
00:20:44,490 --> 00:20:49,290
‫light mode and remove the dark mode.

335
00:20:49,290 --> 00:20:50,910
‫And this is actually it.

336
00:20:50,910 --> 00:20:52,500
‫This is all that we need.

337
00:20:52,500 --> 00:20:54,720
‫And so let's check it out.

338
00:20:54,720 --> 00:20:56,340
‫Let's click here.

339
00:20:56,340 --> 00:20:59,190
‫And indeed here, here the class then changed

340
00:20:59,190 --> 00:21:01,503
‫and everything else changed as well.

341
00:21:02,520 --> 00:21:03,513
‫Beautiful.

342
00:21:04,470 --> 00:21:07,410
‫So look how nice this dark mode here is

343
00:21:07,410 --> 00:21:09,963
‫especially here in the tables and everything.

344
00:21:10,920 --> 00:21:14,700
‫And yeah, basically every modern web application

345
00:21:14,700 --> 00:21:18,120
‫needs a light mode and also a dark mode.

346
00:21:18,120 --> 00:21:19,890
‫And so that's why I decided

347
00:21:19,890 --> 00:21:22,080
‫that I wanted to add this feature

348
00:21:22,080 --> 00:21:24,750
‫to this most real world application

349
00:21:24,750 --> 00:21:26,500
‫that we're building in this course.