Hey everybody, chances are you’re familiar with dark mode, right? A feature used to minimize eyestrain, reduce battery drain, and let’s just face it — looks kind of cool. In this first example here, you can see me switching between light mode and dark mode, and it’s affecting both my operating system as well as an application.

In the second example, if I switch from light mode to dark mode with a web browser open, the browser user interface itself goes dark, but the content by default does not. However, you’re about to change all that because it’s 2020 y’all and modern browsers are now capable of supporting both light and dark modes. And in this tutorial, I’m going to show you exactly how to do it.

Specifically, you’re going to be adding a dark mode theme to your website with just a few lines of CSS. How cool is that? Now, if you want to follow along, you can use this URL on CodePen and the link is also available in the Resources section for this video. And by the way, there’s also a completed version of the project here.

Okay. So the first step in adding a dark mode theme to your website is to tell the browser to look for the user’s preference. And the way you do this is with the prefers-color-scheme media feature query. Now in your style sheet, go all the way to the bottom, and type the following.

@media (prefers-color-scheme: dark) {

}

Feel free to pause the video, if needed. Now this media query is going to check to see if the user has dark mode enabled. If it is, then styles inside the media query are going to be applied. In other words, you’re going to override your existing styles with new ones that will have a darker background and lighter type.

Therefore, it’s a pretty good idea to understand what the default styles are currently doing. So let’s go hunting. So let’s scroll back up until you locate the background-color here, and it looks like it’s using an HSL value to create the pale background of the page. But let’s go ahead and test that. By temporarily changing the lightness value from 85% to 25% and sure enough, the background color of the page becomes darker, and that’s exactly what you’re looking for.

Now, let’s try changing the lightness of the color value from 25% to 85%. So here, the header text changes to a light gray, which is good, but that same change also results in extremely poor contrast of the text, and the white background of the cards. And that’s not so good. But let’s deal with that contrast problem in just a second.

body {
  background-color: hsl(210, 20%, 25%);
  color: hsl(210, 10%, 85%);
}

First, let’s go ahead and get these first two styles up and running. So make sure you undo the last two steps to revert back to your original styles. Then copy the entire body style. Scroll down and paste it between the curly braces of your media query. Now that little test we did above looked pretty good.

So go ahead and use the same values. Change the background-color, lightness value to 25% and the color lightness value to 85%. Now, assuming that light mode is active on your system, you should be seeing no change. So make sure you save and go into Full Page View here in CodePen and we’re going to test it out.

@media (prefers-color-scheme: dark) {

  body {
    background-color: hsl(210, 20%, 25%);
    color: hsl(210, 10%, 85%);
  }

}

On a Mac. If you go to your System Preferences, choose General, and then choose Dark Mode and you should see everything change. Go ahead and try Light mode again, and then go back to Dark mode. But let’s keep this in dark mode and see if we can’t fix that unreadable text. Go back to your Editor View, and now I’m going to open my browser developer tools and do a little sleuthing.

I’m going to inspect a few elements, looking for some background colors, and it looks like the card class has a background-color of white. And as I turned that style off and on, yep, that is definitely the culprit. So you’re going to need to override this in your media query, close your developer tools, go find that media query, and then type dot card with those currently braces.

@media (prefers-color-scheme: dark) {

  body {
    background-color: hsl(210, 20%, 25%);
    color: hsl(210, 10%, 85%);
  }

  .card {
    background-color: hsl(210, 20%, 85%);
  }

}

And in terms of what color you want to make this? Well, you’ve got to start somewhere. So try copying the background-color of the page and pasting it here. So, okay, the text is now legible, but having the color of the cards and the page look the same. It’s kind of weird. So let’s try to improve the contrast and have some fun with the color.

Go ahead and change the hue value to 180 and honestly, that’s pretty good, but you can tweak things a little more. Let’s try lowering the saturation to 10% let’s try 15% for lightness, and that might be a little dark, so let’s go the other way and increase this to 35% all right, well, save your progress.

@media (prefers-color-scheme: dark) {

  body {
    background-color: hsl(210, 20%, 85%);
    color: hsl(210, 10%, 85%);
  }

  .card {
    background-color: hsl(180, 10%, 35%);
  }

}

Go into Full Page View and take a look. This is pretty good. Thank you. And don’t forget to watch our other Take 5 videos and check out our entire course catalog at Gymnasium.