Dark Light Mode Toggle

Toggle switch icons: a black moon and stars indicate night mode, and an orange sun suggests day mode, on a white background.

Ever Been Blinded by Your Own Website?

Imagine this: it’s 2 AM. You're deep into binge-reading your favorite tech blog in bed. Suddenly, you open a new site, and BOOM!, your screen lights up like the gates of heaven just opened. Your retinas? Fried. Your night mode dreams? Shattered.

We've all been there.

Now imagine you're the one building a website that blinds your visitors. Yikes.

That's where a Dark Light Mode Toggle comes in. Not only does it save eyes and batteries, but it also adds a modern, interactive touch to your website that users appreciate.

In this tutorial, I’ll show you how to create a stylish, responsive Dark Light Mode Toggle with icons in less than 10 minutes. No frameworks, no bloated libraries, just clean HTML, CSS, and JavaScript. Let’s roll.

What You’ll Learn

How to create a toggle switch UI with theme icons.
How to apply dynamic theme changes with CSS.
How to store user preference using localStorage.
How to make your toggle persistent across sessions.

Tools You’ll Need

Basic HTML, CSS, and JavaScript knowledge
A text editor (like VS Code)
10 minutes (or less)

Step-by-Step: Build Your Dark Light Mode Toggle with Icons

1. The HTML Structure

<!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="style.css" />
</head>
<body>
  <div class="container">
    <h1>Dark / Light Mode Toggle</h1>
    <div class="toggle-wrapper">
      <span class="icon sun">☀️</span>
      <label class="switch">
        <input type="checkbox" id="mode-toggle" />
        <span class="slider round"></span>
      </label>
      <span class="icon moon">🌙</span>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. Styling the Toggle and Icons (CSS)

/* style.css */

:root {
  --bg-color: #ffffff;
  --text-color: #333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Segoe UI', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-align: center;
  padding: 50px;
}

.container {
  max-width: 600px;
  margin: auto;
}

.toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.icon {
  font-size: 24px;
}

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

.switch input {
  display: none;
}

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

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

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

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

/* Dark mode styles */
body.dark-mode {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}

3. JavaScript: Add Logic + Theme Persistence\

// script.js

const toggle = document.getElementById('mode-toggle');
const body = document.body;

// Load saved theme
if (localStorage.getItem('theme') === 'dark') {
  body.classList.add('dark-mode');
  toggle.checked = true;
}

toggle.addEventListener('change', () => {
  if (toggle.checked) {
    body.classList.add('dark-mode');
    localStorage.setItem('theme', 'dark');
  } else {
    body.classList.remove('dark-mode');
    localStorage.setItem('theme', 'light');
  }
});

Why Use a Dark Light Mode Toggle with Icons?

Icons make the toggle more user-friendly and expressive. Here's why:

Instant Recognition: Users instantly understand what the toggle does.
Cool Factor: Let's face it, icons make UI look modern and sleek.
Improved UX: Visual feedback makes interaction feel natural and responsive.

Bonus: Auto Detect System Theme (Optional)

@media (prefers-color-scheme: dark) {
  body {
    --bg-color: #121212;
    --text-color: #f0f0f0;
  }
}

You can also tweak the JS to auto-apply the user's system preference on first visit.

Wrapping It Up

There you go, you’ve just built a sleek, icon-powered Dark Light Mode Toggle in under 10 minutes. That’s modern UX done right!

Ready to Take Action?

Add the toggle to your next project and give your users the power of choice.

Share this blog with your dev circle and help them level up their UI game.

Want more mini tutorials and UI/UX design tips? Sign up to PrimaraldTV by visiting https://www.primaraldtv.com for more blogs like this. Or follow me on GitHub / Twitter.

Need help with a real-world project? Hire me for UI/UX or web development work, let’s build something smart, fast, and beautiful together.

Your screen, and your users’ eyes, will thank you.

Let me know if you'd like this post turned into a Markdown file, live demo, or downloadable ZIP project!

Author: David C. Igberi

Create a Dark/Light Mode Toggle in Under 10 Minutes