WEBVTT

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.