1
00:00:03,000 --> 00:00:05,497
So, we defined some CSS variables

2
00:00:05,497 --> 00:00:07,162
with different colours

3
00:00:07,162 --> 00:00:09,433
for our dark and light themes.

4
00:00:10,085 --> 00:00:11,785
What we want to do now is

5
00:00:11,785 --> 00:00:13,757
change the theme depending on

6
00:00:13,757 --> 00:00:15,797
the mode selected by the user.

7
00:00:16,434 --> 00:00:18,038
Let's start by cutting out

8
00:00:18,038 --> 00:00:19,581
the dark theme from here,

9
00:00:20,143 --> 00:00:22,158
because we want the light theme

10
00:00:22,158 --> 00:00:23,588
to be used by default.

11
00:00:24,153 --> 00:00:26,068
We want to apply the dark theme

12
00:00:26,068 --> 00:00:27,613
only when the user clicks

13
00:00:27,613 --> 00:00:29,033
the ThemeSwitch button,

14
00:00:29,033 --> 00:00:30,516
so we'll need to do that

15
00:00:30,516 --> 00:00:32,244
somewhere in this component.

16
00:00:32,993 --> 00:00:34,899
Let's see how we can do that.

17
00:00:35,399 --> 00:00:37,592
We're going to use "styled-jsx"

18
00:00:37,592 --> 00:00:39,290
to apply the dark theme,

19
00:00:39,861 --> 00:00:42,101
but in this case we want these styles

20
00:00:42,101 --> 00:00:43,009
to be "global".

21
00:00:43,570 --> 00:00:46,039
Because normally with "styled-jsx"

22
00:00:46,039 --> 00:00:49,380
the styles only apply to this React component.

23
00:00:49,953 --> 00:00:51,751
But for the theme we want

24
00:00:51,751 --> 00:00:53,910
these rules to apply globally,

25
00:00:53,910 --> 00:00:56,068
everywhere in our application.

26
00:00:56,068 --> 00:00:57,723
And styled-jsx provides

27
00:00:57,723 --> 00:00:59,881
this special "global" property

28
00:00:59,881 --> 00:01:01,824
precisely for this purpose.

29
00:01:02,684 --> 00:01:04,211
This way we can redefine

30
00:01:04,211 --> 00:01:05,548
our "color" variables

31
00:01:05,548 --> 00:01:06,885
inside this component

32
00:01:07,513 --> 00:01:09,936
but have them apply to the whole page.

33
00:01:10,436 --> 00:01:11,941
I'm not sure why the button

34
00:01:11,941 --> 00:01:13,111
is showing like that.

35
00:01:13,111 --> 00:01:14,059
It must have been

36
00:01:14,059 --> 00:01:15,954
something to do with Fast Refresh.

37
00:01:16,622 --> 00:01:18,964
Anyway, this is how we can apply

38
00:01:18,964 --> 00:01:20,793
the dark theme from here.

39
00:01:21,367 --> 00:01:24,482
But we only really want to apply those styles

40
00:01:24,482 --> 00:01:26,836
when our "darkMode" state variable

41
00:01:26,836 --> 00:01:28,013
is set to "true".

42
00:01:28,652 --> 00:01:30,288
So we could add a condition

43
00:01:30,288 --> 00:01:31,500
to our JSX elements:

44
00:01:32,152 --> 00:01:34,325
if "darkMode" is a truthy value

45
00:01:36,352 --> 00:01:37,863
then, and only then,

46
00:01:37,863 --> 00:01:39,753
we'll apply these styles.

47
00:01:40,329 --> 00:01:42,196
Now, this makes sense in theory,

48
00:01:42,196 --> 00:01:44,181
but unfortunately it doesn't work.

49
00:01:44,740 --> 00:01:46,051
We get an error that

50
00:01:46,051 --> 00:01:47,756
is actually a bit obscure,

51
00:01:47,756 --> 00:01:49,724
but looking at the stack trace

52
00:01:49,724 --> 00:01:51,757
we can tell that it's happening

53
00:01:51,757 --> 00:01:54,052
in some code to do with styled-jsx.

54
00:01:54,815 --> 00:01:56,230
And this is in fact

55
00:01:56,230 --> 00:01:58,242
a limitation of styled-jsx:

56
00:01:58,242 --> 00:02:00,105
it's not possible to have

57
00:02:00,105 --> 00:02:01,372
a "style" element

58
00:02:01,372 --> 00:02:03,607
that's rendered conditionally.

59
00:02:04,406 --> 00:02:06,537
Fortunately there's a workaround:

60
00:02:06,537 --> 00:02:08,086
we can move these styles

61
00:02:08,086 --> 00:02:10,025
to a separate React component.

62
00:02:10,655 --> 00:02:12,314
So I'll cut them from here,

63
00:02:12,314 --> 00:02:14,404
and go and create a new component,

64
00:02:15,355 --> 00:02:17,077
let's call it "DarkTheme".

65
00:02:17,855 --> 00:02:19,958
This is a normal React component,

66
00:02:19,958 --> 00:02:20,532
as usual.

67
00:02:22,421 --> 00:02:24,092
But what it will render

68
00:02:24,092 --> 00:02:26,054
is just the "style" element

69
00:02:26,054 --> 00:02:28,525
with our rules for the dark theme.

70
00:02:29,171 --> 00:02:31,569
So once we have this separate component

71
00:02:31,569 --> 00:02:33,722
we can use it in our "ThemeSwitch".

72
00:02:34,284 --> 00:02:36,379
Let's start by using it directly,

73
00:02:36,379 --> 00:02:38,030
without conditional logic.

74
00:02:39,084 --> 00:02:40,622
We'll obviously need to import it.

75
00:02:41,784 --> 00:02:43,717
I'll show you the import at the top,

76
00:02:43,717 --> 00:02:46,080
just in case you're using a different editor

77
00:02:46,080 --> 00:02:47,959
where you need to type it manually.

78
00:02:48,567 --> 00:02:50,898
But like this, we'll apply the styles

79
00:02:50,898 --> 00:02:53,797
that are defined in the "DarkTheme" component.

80
00:02:53,797 --> 00:02:56,003
And it's actually nice to have them

81
00:02:56,003 --> 00:02:58,271
encapsulated in their own component.

82
00:02:58,961 --> 00:03:02,163
At this point we can reintroduce our condition,

83
00:03:02,163 --> 00:03:04,344
and only display the "DarkTheme"

84
00:03:04,344 --> 00:03:05,843
if "darkMode" is true.

85
00:03:06,480 --> 00:03:09,004
So at the beginning, "darkMode" is false.

86
00:03:09,504 --> 00:03:11,222
But if we click the button,

87
00:03:11,222 --> 00:03:13,769
"darkMode" becomes true, and this causes

88
00:03:13,769 --> 00:03:16,315
the "DarkTheme" component to be mounted,

89
00:03:16,315 --> 00:03:18,671
and this in turn changes the colours.

90
00:03:19,362 --> 00:03:21,371
If we click the button again,

91
00:03:21,371 --> 00:03:23,103
'darkMode" becomes false,

92
00:03:23,103 --> 00:03:25,875
so the DarkTheme component is unmounted,

93
00:03:26,514 --> 00:03:27,653
and the page reverts

94
00:03:27,653 --> 00:03:28,965
to the default colours.

95
00:03:29,614 --> 00:03:31,628
If we inspect the page elements

96
00:03:31,628 --> 00:03:33,643
we can see exactly which styles

97
00:03:33,643 --> 00:03:35,333
are applied to the "body".

98
00:03:35,962 --> 00:03:38,386
If you look under "Styles" you can see that

99
00:03:38,386 --> 00:03:40,753
the "background-color" is currently white.

100
00:03:41,310 --> 00:03:43,081
Now, if we go and click the button

101
00:03:44,742 --> 00:03:47,051
the "--background-color" variable is black.

102
00:03:47,551 --> 00:03:48,086
Click again,

103
00:03:48,685 --> 00:03:49,856
and it's white again.

104
00:03:49,856 --> 00:03:51,920
We can actually look at the variables

105
00:03:51,920 --> 00:03:52,868
directly as well.

106
00:03:53,479 --> 00:03:54,962
That's the light theme.

107
00:03:54,962 --> 00:03:57,025
But if we switch "Dark Mode" on,

108
00:03:57,590 --> 00:03:59,504
you can see the same variables

109
00:03:59,504 --> 00:04:01,737
overriden by the "DarkTheme" values

110
00:04:02,301 --> 00:04:03,602
So this can be useful

111
00:04:03,602 --> 00:04:05,648
if you need to debug your styles.

112
00:04:06,210 --> 00:04:08,146
But with this, we've got our

113
00:04:08,146 --> 00:04:10,153
"ThemeSwitch" button working:

114
00:04:10,153 --> 00:04:11,329
when you click it

115
00:04:11,329 --> 00:04:13,681
it will actually change the theme.

116
00:04:13,681 --> 00:04:15,825
And note that everything we did

117
00:04:15,825 --> 00:04:18,039
to implement this functionality,

118
00:04:18,039 --> 00:04:20,183
like calling the useState hook,

119
00:04:20,183 --> 00:04:22,881
and conditionally applying some styles,

120
00:04:22,881 --> 00:04:25,233
all this would be exactly the same

121
00:04:25,233 --> 00:04:27,931
in a normal React app, without Next.js.

122
00:04:27,931 --> 00:04:29,660
Still, there is something

123
00:04:29,660 --> 00:04:31,597
slightly different happening

124
00:04:31,597 --> 00:04:33,949
when running this code in Next.js,

125
00:04:33,949 --> 00:04:35,748
and we'll see exactly what

126
00:04:35,748 --> 00:04:36,993
in the next video.