Dark mode is a really cool feature that's typically used to switch between a "light" and "dark" version of your website, and it's surprisingly simple to implement. To achieve this feature, you need to create additional CSS classes that will contain the background and text colours that will be applied when dark mode is active, and no more than six lines of JavaScript (based on this tutorial).

See the embedded Codepen below to see what we'll be creating.

Let's get started.

What Do We Need?

Before we get into creating the dark mode feature, let's first have a think about what we would need to achieve it.

• We'll need some kind of toggle that will trigger dark mode when it's clicked by a user.
• Using CSS, we'll need to specify the colours we want to apply to our background and text content when the toggle is checked.
• We'll need to dynamically add or remove those CSS classes based on whether our toggle is checked or not.

Creating the Toggle

If you haven't created a toggle switch before, there's a great "how-to" on this which you can access here. I won't do a deep dive on this here, as the resource I linked does a pretty good job of it. I highly recommend you spend some time understanding the HTML and CSS used in the link provided before proceeding. Essentially, we've created an HTML checkbox and styled it to provide the desired effect when it is checked and unchecked.

The starting template containing the toggle switch (not yet functional) is linked below.

Add the Dark Mode Classes in CSS

I've named the class that we'll be toggling dark-mode, and I've specified the values I would like to apply to the background property. Since .dark-mode is a style that we will be adding to the body element when the toggle is selected, we need to use the body.dark-mode selector, as seen below:

body.dark-mode{
  background:#242424;
}

The above rule will only be applied when the body element has the dark-mode class applied. If you need a recap on CSS selectors, you can access W3Schools' CSS Selector Reference here.

When the toggle is selected, we've specified that we want a dark background applied to the body element with the hex value of #242424. We also need to add a rule for what we want our card element to look like when dark mode is applied.

body.dark-mode .card{
  background:#414141;
  color:white;
  box-shadow:10px 10px 20px #000;
}

The above rule will be applied to the card elements when the body has dark-mode active.

Toggle Dark Mode with JavaScript

To begin, we're going to get two elements from the DOM: the checkbox, and the toggle switch.

const darkToggle = document.querySelector('.switch');
const checkbox = document.querySelector('input[type="checkbox"]');

Now we want to add a click event listener to the toggle switch that fires an anonymous function when clicked.

darkToggle.addEventListener('click', ()=>{
  //if the checkbox is checked, add dark-mode class to the body element.
  //if it isn't checked, remove the dark-mode class from the body element.
})

When the toggle is clicked, we want to check if the checkbox is checked, then do one of two things: add the dark-mode class to the body element if it is checked, or remove it if it isn't. I'm going to use a ternary operator to check this, but you can use an if-else statement if you'd like.

darkToggle.addEventListener('click', ()=>{
  checkbox.checked ? document.body.classList.add('dark-mode') : document.body.classList.remove('dark-mode');
})

That's it!

And that's it! You now know how to toggle dark mode. This is the fully functioning result:

This tutorial involved styling just the body and our card elements, but for your projects that involve more content you'll need to declare additional CSS rules that begin with the body.dark-mode selector followed by the element you want to add a dark mode style for.

If you found this article useful, let me know on Twitter! - @jacobcollinsdev