1
00:00:03,000 --> 00:00:04,960
We added a "Dark Mode" button

2
00:00:04,960 --> 00:00:05,974
to our website.

3
00:00:06,541 --> 00:00:09,393
But all it does at the moment if we click it

4
00:00:09,393 --> 00:00:10,689
is changes its text.

5
00:00:11,253 --> 00:00:12,722
What we want it to do

6
00:00:12,722 --> 00:00:15,730
is actually change the colours of our page.

7
00:00:16,300 --> 00:00:18,745
So let's see how to add some styles

8
00:00:18,745 --> 00:00:20,142
to enable dark mode.

9
00:00:20,733 --> 00:00:23,003
And for a start let's update

10
00:00:23,003 --> 00:00:25,030
the "globals.css" styles.

11
00:00:25,612 --> 00:00:27,507
"Dark mode" basically means

12
00:00:27,507 --> 00:00:30,876
setting the "background-color" to a dark colour,

13
00:00:30,876 --> 00:00:31,788
like "black".

14
00:00:32,429 --> 00:00:34,123
And if we do that we also need to

15
00:00:34,123 --> 00:00:35,099
change the "color",

16
00:00:35,651 --> 00:00:37,246
that is the text colour,

17
00:00:37,246 --> 00:00:38,776
to "white" for example.

18
00:00:39,343 --> 00:00:41,629
And that's the result in the browser.

19
00:00:41,629 --> 00:00:43,668
There's actually a small problem:

20
00:00:43,668 --> 00:00:46,572
our "Dark Mode" button is not visible any more.

21
00:00:47,196 --> 00:00:48,567
Let's go and fix that quickly.

22
00:00:49,829 --> 00:00:52,573
What's happening is that the button text

23
00:00:52,573 --> 00:00:55,044
is still being displayed as "black",

24
00:00:55,044 --> 00:00:57,445
so it's the same as the background.

25
00:00:58,083 --> 00:01:01,002
We can set the button "color" to "inherit",

26
00:01:01,002 --> 00:01:03,038
so it will use the same colour

27
00:01:03,038 --> 00:01:04,532
as its parent element,

28
00:01:05,168 --> 00:01:06,371
which means "white",

29
00:01:06,371 --> 00:01:08,717
since that's what we set on the "body".

30
00:01:09,278 --> 00:01:11,257
And by the way we're setting

31
00:01:11,257 --> 00:01:13,166
these styles on the "body",

32
00:01:13,166 --> 00:01:15,217
because we want them to apply

33
00:01:15,217 --> 00:01:16,843
to the entire document.

34
00:01:16,843 --> 00:01:18,540
Now, the problem is that

35
00:01:18,540 --> 00:01:21,580
we don't want our page to always look dark,

36
00:01:21,580 --> 00:01:24,125
we want to be able to switch between

37
00:01:24,125 --> 00:01:25,893
a dark and a light theme.

38
00:01:26,888 --> 00:01:29,027
There are a few ways to do this,

39
00:01:29,027 --> 00:01:31,968
but in this example we'll use CSS variables.

40
00:01:32,535 --> 00:01:34,841
Let's define some global variables

41
00:01:34,841 --> 00:01:37,080
using the ":root" pseudo-element.

42
00:01:37,648 --> 00:01:39,818
CSS variables start with "--",

43
00:01:39,818 --> 00:01:41,627
and then we can name them

44
00:01:41,627 --> 00:01:42,785
however we like,

45
00:01:43,430 --> 00:01:45,837
so we could define a "--background-color"

46
00:01:47,496 --> 00:01:48,901
with a value of "white",

47
00:01:49,401 --> 00:01:51,708
and let's call it a "--text-color"

48
00:01:52,208 --> 00:01:53,378
with value "black".

49
00:01:53,878 --> 00:01:56,139
So black text on white background

50
00:01:56,139 --> 00:01:57,921
will be our "Light Theme".

51
00:01:58,490 --> 00:02:00,663
Later we'll add a "Dark Theme" as well.

52
00:02:01,163 --> 00:02:03,190
But first let's see how to use

53
00:02:03,190 --> 00:02:04,271
those variables.

54
00:02:04,839 --> 00:02:06,110
Instead of a normal value,

55
00:02:06,610 --> 00:02:08,598
here we can use the "var()" function

56
00:02:09,098 --> 00:02:10,984
and pass our variable name,

57
00:02:10,984 --> 00:02:13,008
that is "--background-color".

58
00:02:13,008 --> 00:02:14,823
So this expression will be

59
00:02:14,823 --> 00:02:16,429
replaced with the value

60
00:02:16,429 --> 00:02:19,012
of the "--background-color" variable.

61
00:02:19,792 --> 00:02:21,575
Let's do the same for the "color",

62
00:02:21,575 --> 00:02:23,148
before applying these changes.

63
00:02:23,701 --> 00:02:25,496
In this case we want the value

64
00:02:25,496 --> 00:02:27,352
of the "--text-color" variable.

65
00:02:27,912 --> 00:02:28,970
If we save now,

66
00:02:28,970 --> 00:02:31,368
you can see that the page displays

67
00:02:31,368 --> 00:02:33,554
black text on white background.

68
00:02:34,196 --> 00:02:36,138
Now, let's add the dark colour

69
00:02:36,138 --> 00:02:38,276
by simply duplicating this block.

70
00:02:38,929 --> 00:02:41,102
But this is the "Dark Theme",

71
00:02:41,602 --> 00:02:43,901
so we want a "black" background,

72
00:02:43,901 --> 00:02:45,842
and "white" "--text-color".

73
00:02:46,414 --> 00:02:48,473
And if we save at this point,

74
00:02:48,473 --> 00:02:51,598
we see the dark colours applied to the page.

75
00:02:51,598 --> 00:02:53,445
The interesting thing here

76
00:02:53,445 --> 00:02:56,002
is that we are redefining the values

77
00:02:56,002 --> 00:02:57,493
of our CSS variables.

78
00:02:58,278 --> 00:03:00,771
First we set them to the light theme,

79
00:03:01,271 --> 00:03:04,185
then we set them again to the dark theme,

80
00:03:04,185 --> 00:03:06,246
And the last definition wins.

81
00:03:06,818 --> 00:03:09,978
So we can effectively set some default values,

82
00:03:09,978 --> 00:03:11,832
that are our "Light Theme",

83
00:03:11,832 --> 00:03:13,756
and then override them later

84
00:03:13,756 --> 00:03:15,405
to use the "Dark Theme".

85
00:03:15,405 --> 00:03:16,916
This will be useful to

86
00:03:16,916 --> 00:03:18,908
change the theme dynamically.

87
00:03:19,752 --> 00:03:21,448
But before we get to that,

88
00:03:21,448 --> 00:03:23,928
let's improve our styles a little bit.

89
00:03:23,928 --> 00:03:25,429
With a black background

90
00:03:25,429 --> 00:03:27,778
our red links are not very readable.

91
00:03:28,474 --> 00:03:30,147
So let's add another variable

92
00:03:30,147 --> 00:03:31,475
for the "--link-color",

93
00:03:32,074 --> 00:03:34,916
and by default we want it to be "darkred",

94
00:03:35,416 --> 00:03:37,038
same as what we currently have.

95
00:03:37,538 --> 00:03:39,159
But here we now want to use

96
00:03:39,159 --> 00:03:41,622
the value of our "--link-color" variable.

97
00:03:44,404 --> 00:03:46,076
So far this makes no difference.

98
00:03:46,770 --> 00:03:48,943
If we comment out the Dark Theme

99
00:03:49,443 --> 00:03:51,917
the default colour are the same as before.

100
00:03:52,417 --> 00:03:53,965
But now we can redefine

101
00:03:53,965 --> 00:03:55,850
that "--link-color" variable

102
00:03:55,850 --> 00:03:57,129
for the Dark Theme.

103
00:03:58,517 --> 00:04:00,929
We could use "yellow" in this case,

104
00:04:00,929 --> 00:04:03,549
that works well on a black background.

105
00:04:03,549 --> 00:04:05,134
That's much better, but

106
00:04:05,134 --> 00:04:08,168
maybe these colours are a bit too saturated.

107
00:04:08,875 --> 00:04:11,400
Let's pick a different shade of yellow,

108
00:04:11,400 --> 00:04:12,955
maybe a bit more orange,

109
00:04:13,520 --> 00:04:15,115
and also a bit darker,

110
00:04:15,115 --> 00:04:15,840
like that.

111
00:04:15,840 --> 00:04:17,652
That's easier on the eye.

112
00:04:18,298 --> 00:04:20,538
We could do the same for the "white" as well,

113
00:04:21,564 --> 00:04:23,570
make it just a tiny bit darker.

114
00:04:24,664 --> 00:04:25,534
Something like that.

115
00:04:26,130 --> 00:04:28,047
And our background could also be

116
00:04:28,047 --> 00:04:29,246
slightly less black.

117
00:04:31,396 --> 00:04:33,269
Ok, this will do for this example.

118
00:04:33,769 --> 00:04:35,597
Of course feel free to pick

119
00:04:35,597 --> 00:04:38,375
slightly different colours if you prefer.

120
00:04:38,375 --> 00:04:40,204
The important thing is that

121
00:04:40,204 --> 00:04:42,913
we have a different set of CSS variables

122
00:04:42,913 --> 00:04:44,200
for our Dark Theme,

123
00:04:44,200 --> 00:04:46,300
and in the next video we'll see

124
00:04:46,300 --> 00:04:48,739
how to switch between the two themes

125
00:04:48,739 --> 00:04:50,906
when the user clicks the button.