1
00:00:00,259 --> 00:00:09,541
[MUSIC]

2
00:00:09,541 --> 00:00:10,746
Hey, everyone, what's up?

3
00:00:10,746 --> 00:00:13,584
Dustin, here,
I've got a quick one for you today.

4
00:00:13,584 --> 00:00:17,210
I wanna show you how easily we can
transform our project from a light

5
00:00:17,210 --> 00:00:18,453
theme to a dark theme.

6
00:00:18,453 --> 00:00:23,240
It's pretty easy and we mostly just use
CSS and only two lines of JavaScript.

7
00:00:24,240 --> 00:00:26,115
Let's hop into the code and
take a better look.

8
00:00:28,771 --> 00:00:31,760
The way that we'll do this
is by using CSS variables.

9
00:00:31,760 --> 00:00:34,077
And in case you aren't
familiar with CSS variables,

10
00:00:34,077 --> 00:00:35,680
let's go over them really quickly.

11
00:00:36,980 --> 00:00:40,710
So in our style sheet,
we can set up a new rule for the body.

12
00:00:40,710 --> 00:00:44,210
And let's say we wanted to set
up a background color of blue.

13
00:00:45,730 --> 00:00:49,404
Well, to do this with a variable,
we can just type in the variable name,

14
00:00:49,404 --> 00:00:51,750
which will start with two dashes.

15
00:00:51,750 --> 00:00:54,750
So dash dash, and
then we can call this --body-bg.

16
00:00:55,930 --> 00:00:56,820
And we can set it to blue.

17
00:00:58,600 --> 00:01:01,258
Now, all this does is
initialize a variable,

18
00:01:01,258 --> 00:01:03,710
we aren't actually using this yet.

19
00:01:03,710 --> 00:01:07,108
So in order to use it,
we'll need to come in here and

20
00:01:07,108 --> 00:01:11,240
type in the var keyword
with a set of parentheses.

21
00:01:11,240 --> 00:01:15,180
And inside of those parentheses, we will
just copy and paste our variable name.

22
00:01:16,590 --> 00:01:19,900
So, now this is the same as saying,
background color blue.

23
00:01:21,370 --> 00:01:23,500
CSS variables are actually
pretty simple to use.

24
00:01:25,040 --> 00:01:28,995
Let's hop into our main stylesheet and
take a look at what we've got so far.

25
00:01:33,502 --> 00:01:34,518
So, in our body rule,

26
00:01:34,518 --> 00:01:39,210
you'll notice at the very top we will have
two variables that are already being used.

27
00:01:39,210 --> 00:01:44,128
For background color we are using the
--primary-page-bg which is right here and

28
00:01:44,128 --> 00:01:46,560
this is the light gray background color.

29
00:01:47,890 --> 00:01:50,514
And then we also have
a variable being used for

30
00:01:50,514 --> 00:01:54,170
the color which is --primary-text-color.

31
00:01:54,170 --> 00:01:57,959
And this is the dark grey that you see for
the text.

32
00:01:59,719 --> 00:02:03,799
Next you'll see --accent-color, which is
this light red that we're using for

33
00:02:03,799 --> 00:02:05,720
the underline as well as the heart.

34
00:02:07,340 --> 00:02:11,180
The rest of the variables are actually
what we're going to change whenever we

35
00:02:11,180 --> 00:02:12,310
toggle our dark mode.

36
00:02:14,140 --> 00:02:18,327
So what we'll wanna do is actually
override all of these variables with

37
00:02:18,327 --> 00:02:20,502
darker colors for our darker theme.

38
00:02:20,502 --> 00:02:24,955
And the way that we can do that is by
setting up a new body rule with a class of

39
00:02:24,955 --> 00:02:29,420
dark, and we can start overriding
these by adding in different colors.

40
00:02:29,420 --> 00:02:34,281
So our --primary-text-color will be a light
color because our --title-panel-bg as

41
00:02:34,281 --> 00:02:38,800
well as our --snippet-panel-bg
will have darker colors.

42
00:02:38,800 --> 00:02:42,450
Our --read-more-button will get
a light background with darker text.

43
00:02:43,620 --> 00:02:48,496
So we'll hit Save, and we can test
this by hopping into our HTML file and

44
00:02:48,496 --> 00:02:50,710
giving our body a class of dark.

45
00:02:52,560 --> 00:02:55,660
And there we go, we have our dark theme.

46
00:02:55,660 --> 00:03:00,361
But we don't wanna do this like that,
we wanna write some JavaScript.

47
00:03:00,361 --> 00:03:03,120
So let's hop into our JavaScript file.

48
00:03:04,120 --> 00:03:07,080
And what we can do is
target this button here.

49
00:03:08,420 --> 00:03:11,810
And this button has
an id of toggleThemeBtn.

50
00:03:11,810 --> 00:03:14,760
So let's copy that and
we'll add an event listener.

51
00:03:15,980 --> 00:03:17,358
So we can set this up in a variable.

52
00:03:23,352 --> 00:03:24,880
So we set up a toggleThemeBtn.

53
00:03:26,180 --> 00:03:29,620
And we're going to add
an event listener for clicks.

54
00:03:29,620 --> 00:03:33,833
So toggleThemeBtn.addEventListener(
'click' ) and

55
00:03:33,833 --> 00:03:36,620
we'll give it an anonymous function.

56
00:03:38,000 --> 00:03:42,690
And what we wanna do is we want to
toggle the dark theme for our body.

57
00:03:42,690 --> 00:03:51,430
And we can do that by typing in
document.body.classList.toggle( 'dark').

58
00:03:51,430 --> 00:03:54,694
And if you're unfamiliar
with the classList.toggle,

59
00:03:54,694 --> 00:03:59,046
it basically adds a class of dark if
the body doesn't have one when this event

60
00:03:59,046 --> 00:04:02,310
listener runs, and if it does,
then it just removes it.

61
00:04:03,580 --> 00:04:05,880
So, let's hit save and
let's click on our button.

62
00:04:07,470 --> 00:04:09,970
There we go,
we have now toggled our dark theme.

63
00:04:12,120 --> 00:04:15,932
I hope this quick walkthrough guide on
setting up a dark theme toggle helps you

64
00:04:15,932 --> 00:04:18,890
create some awesome looking projects or
apps.

65
00:04:18,890 --> 00:04:22,008
And if you do, don't be afraid to
share them with the community.

66
00:04:22,008 --> 00:04:24,980
Until next time, happy coding and
I'll see you in the next one.