Easily Create Dark and Light Mode with localStorage in JavaScript

Google Advertisement

Learn how to implement a dark and light mode toggle using JavaScript and localStorage. Step-by-step guide with code examples and simple explanations.

Published on 23 May 2025

🌓 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

🔥 Read with Full Features on Our Website
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
Google Advertisement

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).
Google Advertisement

.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>.
Google Advertisement

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

Google Advertisement

Easily Create Dark and Light Mode with localStorage in JavaScript

🌓 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

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize