Summary

This article provides a step-by-step tutorial on how to implement a dark mode toggle feature using HTML, CSS, and JavaScript.

Abstract

The article titled "How to build a dark mode toggle with CSS and Javascript?" is a comprehensive guide aimed at developers who wish to integrate a dark mode feature into their websites. The author, after multiple requests, has compiled a detailed tutorial that begins with the prerequisites of having a web browser and a text editor like VScode. The tutorial then delves into the use of CSS variables to create a dynamic theme system, demonstrating how to define and use these variables within the stylesheet. It also covers the JavaScript necessary to toggle the dark mode class on the body element, which changes the CSS variables to predefined dark mode values. The article concludes with a call to action for readers to engage with the content by

How to build a dark mode toggle with CSS and Javascript?

Hello friends 👋, after being asked many times how to make a dark mode toggle, I have decided to write this step-by-step tutorial with HTML, CSS, and JavaScript.

To follow this tutorial, you need two things installed on your laptop.

A web browser: Google Chrome, Firefox, or any other web browser.
A text editor: the most famous developer text editor is VScode, but you can use any text editor.

How to build a dark mode toggle?

We will use CSS variables to adapt our style to dark and light modes. If you are unfamiliar with CSS variables, CSS variables are like Js variables. They can contain specific values that you can change or get later.

Note: The variable name must begin with two dashes ( — ), and it is case-sensitive!

--bg-color: #FFF;

We use the Var() function to get the variable's value.

background: var(--bg-color);

Let’s start coding!

Open your text editor, and create the following files: index.html style.css script.js

Save them in your project folder. Then insert the following code inside your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Dark theme toggle</title>
</head>
<body>
  <div class="container">
    <h1 class="title">Hello Friends 👋</h1>
    <p>Today's article is about creating light/dark theme toggle!!!</p>
    <small>👇 You can find the link of the full code in the description 👇</small>
    <div class="btns">
      <button class="btn js-btn-theme">Toggle theme</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

We added the structure of our page. Inside the head element, we have a link to the style.css file. And we have linked the script.js before-the-body closing tag.

Let’s start writing some CSS code. Open your style.css file. The first step is to set the global variables.

body {
  --bg-color: #FFF;
  --bg-light: #eee;
  --text-primary: #111;
  --text-secondary: #757575;
}

Then let’s define the logic we will use to make our page support dark mode.

Inside our HTML file, we have a toggle button with the class name “js-btn-theme"

When we click this button, we want to toggle a class name “dark" inside our body.

Then we reassign new values to our global variables like this:

body.dark {
  --bg-color: #0c0e10;
  --bg-light: #111;
  --text-primary: #fff;
  --text-secondary: #eee;
}

Then we add some general CSS styles for our page.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: var(--text-primary);
  background: var(--bg-color);
}
.container {
  width: 500px;
  text-align: center;
}
.title {
  color: var(--text-primary);
}
p {
  color: var(--text-secondary);
}
small {
  font-size: 11px;
}
.btns {
  margin-top: 15px;
}
.btn {
  border: 0;
  padding: 5px 15px;
  border-radius: 15px;
  background-color: var(--bg-light);
  color: var(--text-primary);
  cursor: pointer;
}

Let’s move to the fun part, writing js code that will toggle the class name "dark" when the user clicks the button.

// find the button that has a class name "js-btn-theme"
const toggleBtn = document.querySelector('.js-btn-theme');
if (toggleBtn) { // if the button exist we add a click listener
  toggleBtn.addEventListener('click', function() {
    // toggle the class name on the body element
    document.querySelector('body').classList.toggle('dark');
  })
}

Thanks for reading. I hope you have learned how to make a dark theme toggle with CSS and JavaScript.

If you want to know how I write my blog posts 10 times faster. Use Jasper AI

You will get 10,000 bonus credits using my link!

Please let me know in the comments section below if you have any questions.

Do you know you can clap up to 50 times for an article? Go give it a try!

If you want the source code, click the link below 👇

Source Code