Home
CSS
HTML

Light & Dark Mode Toggle in HTML, CSS and JavaScript

Light & Dark Mode Toggle | Coding Zemigle

In recent years, dark mode has gained significant popularity among users due to its sleek aesthetic and practical benefits. By reducing the amount of bright light emitted by screens, dark mode can help reduce eye strain, especially in low-light environments. It's also a feature that many users have come to expect from modern websites and applications, offering both comfort and a polished, professional look.

In this tutorial, you’ll learn how to create a simple yet effective dark mode toggle using HTML, CSS, and JavaScript. We'll walk you through the process of setting up your basic page structure, writing styles for both light and dark modes, and using JavaScript to create a button that switches between these modes. By the end of this guide, you'll have a functional dark mode toggle that you can easily implement on any website.

Step 01: Basic HTML structure

Before diving into dark mode styling and functionality, we need to create the basic structure of our webpage using HTML. This will serve as the foundation for implementing the dark mode toggle.

Below is the basic HTML code required for this tutorial:

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light & Dark Mode Toggle | Coding Zemigle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Dark Mode Toggle</h1>
            <label class="switch">
                <input type="checkbox" id="darkModeToggle">
                <span class="slider round"></span>
            </label>
        </div>
    </header>
    <main>
        <p>Welcome to the dark mode toggle example. Toggle the switch to change themes.</p>
        <h5>Copyright © Coding Zemigle, all rights reserved.</h5>
    </main>
    <script src="script.js"></script>
</body>
</html>



With this basic HTML structure in place, we are ready to move on to the next step: defining the light and dark mode styles in CSS.


Step 02: Styling for light & dark modes toggle

In this step, we’ll establish the base styles for our light mode. We'll use CSS variables to simplify theme management, making it easy to switch values between light and dark modes.

Here’s the initial CSS for the light mode:  

✲    style.css
/* Basic styles */
body {
  font-family: 'Verdana', sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;
  color: #333;
}

header {
  background: #ffffff;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
}

main {
  padding: 20px;
}

/* Toggle switch styles */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider.round {
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 50%;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:checked+.slider:before {
  transform: translateX(26px);
}

/* Dark mode styles */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

header.dark-mode {
  background: #1e1e1e;
  border-bottom: 1px solid #333;
}

h5{
  margin-top: 10%;
}



With both the light and dark mode styles now defined in CSS, the next step is to implement the JavaScript that will handle the toggle functionality and enable users to switch between these themes. Let’s move on to writing the JavaScript code!


Step 03: Enabling the toggle functionality

Now that we’ve styled the light and dark modes using CSS, the next step is to enable the functionality for switching between these themes using JavaScript. We’ll use JavaScript to add or remove the data-theme="dark" attribute to the <body> element when the user clicks the toggle button. Additionally, we'll store the user's theme preference in localStorage so that the theme persists across page reloads.

Here’s the JavaScript code to achieve this:  

✲    script.js
document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('darkModeToggle');
    const body = document.body;
    const header = document.querySelector('header');

    // Load user preference from localStorage
    const savedMode = localStorage.getItem('dark-mode') === 'true';
    if (savedMode) {
        body.classList.add('dark-mode');
        header.classList.add('dark-mode');
        toggle.checked = true;
    }

    // Toggle dark mode
    toggle.addEventListener('change', () => {
        if (toggle.checked) {
            body.classList.add('dark-mode');
            header.classList.add('dark-mode');
            localStorage.setItem('dark-mode', 'true');
        } else {
            body.classList.remove('dark-mode');
            header.classList.remove('dark-mode');
            localStorage.setItem('dark-mode', 'false');
        }
    });
});



With this JavaScript code, your website now has a fully functional dark mode toggle. When users click the toggle button, the theme will switch between light and dark modes, and their preference will be saved for future visits. Additionally, the button text will update to indicate the mode that the user can switch to next. 

By following these steps, you now have a fully functional dark mode toggle for your website. This feature not only improves accessibility but also provides users with the flexibility to choose their preferred viewing experience.

As you continue to develop your web projects, consider further enhancing this functionality by adding more customization options, such as automatic theme switching based on system preferences or time of day. By doing so, you'll create a more dynamic and user-friendly interface.