Easily Create Dark and Light Mode with localStorage in JavaScript

🌓 How to Implement a Dark/Light Mode Toggle Using localStorage in JavaScript

Adding a dark/light mode toggle is a popular feature in modern websites. It improves user experience by letting visitors choose a theme that suits their eyes, especially in low-light environments. In this tutorial, you’ll learn how to add a dark/light mode toggle with a button, and save the user’s preference using localStorage so it stays even after refreshing the page.

✅ What You’ll Learn

What is dark/light mode?
Why use localStorage?
HTML structure for theme toggle
CSS for dark and light themes
JavaScript to switch themes and save the choice
Step-by-step explanation of the full code

🔹 Step 1: Create the HTML

This is the basic structure with a toggle button.

<!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>
  <div class="container">
    <h1>Welcome to My Website</h1>
    <button id="toggle-btn">Toggle Theme</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

🧠 Explanation:

We include a button with id="toggle-btn" for switching themes.
The <link rel="stylesheet"> includes the external CSS.
JavaScript is linked at the bottom with script.js.

🔹 Step 2: Style the Themes in CSS

We define two themes using CSS: default (light) and .dark-mode.

/* styles.css */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: Arial, sans-serif;
  transition: all 0.3s ease;
}

.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

.container {
  text-align: center;
  padding: 50px;
}

#toggle-btn {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

🧠 Explanation:

Default theme is light (white background, black text).
.dark-mode class applies dark background and white text.
Smooth transition is added for visual effect.

🔹 Step 3: JavaScript to Toggle Theme and Use localStorage

Now let’s write the main logic in JavaScript.

// script.js

// Get button and body
const toggleBtn = document.getElementById('toggle-btn');
const body = document.body;

// Check localStorage for saved theme
const savedTheme = localStorage.getItem('theme');

if (savedTheme === 'dark') {
  body.classList.add('dark-mode');
}

// Toggle theme on button click
toggleBtn.addEventListener('click', () => {
  body.classList.toggle('dark-mode');

  // Save the selected theme
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

🧠 Explanation:

Get Elements: We access the body and the toggle button.
Check localStorage:
- localStorage.getItem('theme') checks if the user has a saved theme.
- If it’s 'dark', we apply the dark mode by adding .dark-mode to <body>.
Event Listener:
- When the button is clicked, it toggles the class.
- Then it saves the theme choice in localStorage.

📌 What is localStorage and Why Use It?

localStorage is a browser feature that lets you store data locally that doesn’t get deleted when the page is refreshed.

It’s perfect for remembering theme choices.
Example: If a user selects dark mode today, it stays even after refreshing or revisiting the site.

🎉 Final Output

When you open the page:

It loads the saved theme automatically.
You can toggle between dark and light themes.
The preference is saved and remembered.

✅ Summary

Step	What You Did
HTML	Created a structure with a toggle button
CSS	Defined light and dark themes
JS	Wrote logic to switch themes and save preference

Easily Create Dark and Light Mode with localStorage in JavaScript

Follow us on

🌓 How to Implement a Dark/Light Mode Toggle Using localStorage in JavaScript

✅ What You’ll Learn

🔹 Step 1: Create the HTML

🧠 Explanation:

🔹 Step 2: Style the Themes in CSS

🧠 Explanation:

🔹 Step 3: JavaScript to Toggle Theme and Use localStorage

🧠 Explanation:

📌 What is localStorage and Why Use It?

🎉 Final Output

✅ Summary

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us