Dark Mode in CSS

[MUSIC] 0:00 Hey, everyone, what's up? 0:09 Dustin, here, I've got a quick one for you today. 0:10 I wanna show you how easily we can transform our project from a light 0:13 theme to a dark theme. 0:17 It's pretty easy and we mostly just use CSS and only two lines of JavaScript. 0:18 Let's hop into the code and take a better look. 0:24 The way that we'll do this is by using CSS variables. 0:28 And in case you aren't familiar with CSS variables, 0:31 let's go over them really quickly. 0:34 So in our style sheet, we can set up a new rule for the body. 0:36 And let's say we wanted to set up a background color of blue. 0:40 Well, to do this with a variable, we can just type in the variable name, 0:45 which will start with two dashes. 0:49 So dash dash, and then we can call this --body-bg. 0:51 And we can set it to blue. 0:55 Now, all this does is initialize a variable, 0:58 we aren't actually using this yet. 1:01 So in order to use it, we'll need to come in here and 1:03 type in the var keyword with a set of parentheses. 1:07 And inside of those parentheses, we will just copy and paste our variable name. 1:11 So, now this is the same as saying, background color blue. 1:16 CSS variables are actually pretty simple to use. 1:21 Let's hop into our main stylesheet and take a look at what we've got so far. 1:25 So, in our body rule, 1:33 you'll notice at the very top we will have two variables that are already being used. 1:34 For background color we are using the --primary-page-bg which is right here and 1:39 this is the light gray background color. 1:44 And then we also have a variable being used for 1:47 the color which is --primary-text-color. 1:50 And this is the dark grey that you see for the text. 1:54 Next you'll see --accent-color, which is this light red that we're using for 1:59 the underline as well as the heart. 2:03 The rest of the variables are actually what we're going to change whenever we 2:07 toggle our dark mode. 2:11 So what we'll wanna do is actually override all of these variables with 2:14 darker colors for our darker theme. 2:18 And the way that we can do that is by setting up a new body rule with a class of 2:20 dark, and we can start overriding these by adding in different colors. 2:24 So our --primary-text-color will be a light color because our --title-panel-bg as 2:29 well as our --snippet-panel-bg will have darker colors. 2:34 Our --read-more-button will get a light background with darker text. 2:38 So we'll hit Save, and we can test this by hopping into our HTML file and 2:43 giving our body a class of dark. 2:48 And there we go, we have our dark theme. 2:52 But we don't wanna do this like that, we wanna write some JavaScript. 2:55 So let's hop into our JavaScript file. 3:00 And what we can do is target this button here. 3:04 And this button has an id of toggleThemeBtn. 3:08 So let's copy that and we'll add an event listener. 3:11 So we can set this up in a variable. 3:15 So we set up a toggleThemeBtn. 3:23 And we're going to add an event listener for clicks. 3:26 So toggleThemeBtn.addEventListener( 'click' ) and 3:29 we'll give it an anonymous function. 3:33 And what we wanna do is we want to toggle the dark theme for our body. 3:38 And we can do that by typing in document.body.classList.toggle( 'dark'). 3:42 And if you're unfamiliar with the classList.toggle, 3:51 it basically adds a class of dark if the body doesn't have one when this event 3:54 listener runs, and if it does, then it just removes it. 3:59 So, let's hit save and let's click on our button. 4:03 There we go, we have now toggled our dark theme. 4:07 I hope this quick walkthrough guide on setting up a dark theme toggle helps you 4:12 create some awesome looking projects or apps. 4:15 And if you do, don't be afraid to share them with the community. 4:18 Until next time, happy coding and I'll see you in the next one. 4:22

You need to sign up for Treehouse in order to set up Workspace

Sign up