Implementing a Modern Dark/Light Mode Toggle: A Step-by-Step Guide

In the digital age, giving users the option to switch between dark and light modes has become a standard feature on many websites. This feature not only enhances user experience but also improves accessibility and can reduce eye strain. In this blog post, we'll guide you through creating a modern dark/light mode toggle switch using separate HTML, CSS, and JavaScript files. This approach ensures a clean separation of concerns and a more organized codebase.

Project Overview

We'll be creating a toggle switch with:

A larger, sleek design
Smooth transitions between light and dark modes
Persistent user preferences saved using localStorage

We'll break down the implementation into three separate files:

HTML - The structure of our toggle switch.
CSS - The styling for the toggle switch and page.
JavaScript - The functionality to switch between modes and save user preferences.

1. HTML: Structure

Create a file named index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark/Light Mode Toggle</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <label class="toggle">
      <input type="checkbox" id="darkModeToggle" />
      <span class="slider"></span>
    </label>
    <script src="script.js"></script>
  </body>
</html>

2. CSS: Styling

Create a file named styles.css:

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #2196f3;
  transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}
.toggle {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 125px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f4;
  transition: 0.4s;
  border-radius: 120px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 100px;
  width: 100px;
  left: 10px;
  bottom: 12px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
input:checked + .slider {
  background-color: #2196f3;
}
input:checked + .slider:before {
  transform: translateX(130px);
  background-color: #333;
}
body.dark-mode .slider:before {
  background-color: #333;
}
.slider-icon {
  display: none;
}

3. JavaScript: Functionality

Create a file named script.js:

const darkModeToggle = document.getElementById("darkModeToggle");
const body = document.body;

// Check if user preference is stored in localStorage
const isDarkMode = localStorage.getItem("darkMode") === "true";

// Set initial state
body.classList.toggle("dark-mode", isDarkMode);
darkModeToggle.checked = isDarkMode;

darkModeToggle.addEventListener("change", () => {
  body.classList.toggle("dark-mode");
  localStorage.setItem("darkMode", darkModeToggle.checked);
});

Code Breakdown

HTML (index.html):
- Contains the basic structure of the page and includes references to the external CSS and JavaScript files.
- The <label class="toggle"> wraps the input and slider span to create the toggle switch.
CSS (styles.css):
- Defines the appearance of the toggle switch and the page.
- Handles styling for both light and dark modes, ensuring smooth transitions and a modern look.
JavaScript (script.js):
- Manages the toggle functionality and saves the user’s preference in localStorage.
- Ensures that the toggle switch maintains the user’s mode preference across page reloads.

Conclusion

By separating the HTML, CSS, and JavaScript into distinct files, we ensure a cleaner, more organized codebase. This modern dark/light mode toggle switch provides a professional look and feel, enhancing the user experience on your website. Feel free to modify and adapt the code to fit your specific design needs. If you have any questions or need further customization, don’t hesitate to reach out!

Happy coding!