DEV Community

Cover image for Beginner's Guide on Light/Dark Mode Toggle Using JavaScript (No Frameworks)
Gift Egbonyi
Gift Egbonyi

Posted on

Beginner's Guide on Light/Dark Mode Toggle Using JavaScript (No Frameworks)

#html #css #javascript #darkmode

Dark mode isn’t just a feature, it’s a lifestyle.

Tbvh, dark mode just makes everything cooler. And if your site doesn't have it yet, what are you even doing? 😅
In this short tutorial, I will walk you through how to add a simple dark/light mode toggle using just HTML, CSS and JavaScript. No libraries. No frameworks. Just pure, clean code.

What We are Building

A basic webpage that switches between dark and light mode when you click a button. That’s it. No long writeups.

Step 1: Your HTML

Create a button to trigger the toggle:

<button id="toggle-mode">Toggle Dark Mode</button>
<h1>Hello, world!</h1>
<p>This is a simple dark/light mode toggle.</p>
Enter fullscreen mode Exit fullscreen mode

You can add more stuff, but for now, we’re keeping it minimal.

Step 2: CSS Styles for Both Modes

We’ll use the dark-mode class to switch themes.

/* Light mode (default) */
body {
  background-color: #f2f2f2;
  color: #1a1a1a;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  padding: 3rem;
  transition: background-color 0.3s, color 0.3s;
}

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

/* Optional button styling */
button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  background-color: #111;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 2rem;
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode button {
  background-color: #fff;
  color: #111;
}

/* Optional heading and paragraph styling */
h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

Bonus points if you add some smooth transitions like I did.

Step 3: JavaScript Toggle Logic

Now let’s write a simple script to toggle the dark-mode class on the body.

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

toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});
Enter fullscreen mode Exit fullscreen mode

Yep. That’s all. Just toggle the class when the button is clicked.

Optional: Change Button Text Too

Wanna go extra? Let’s make the button text change depending on the current mode.

toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');

  if (document.body.classList.contains('dark-mode')) {
    toggleBtn.textContent = 'Switch to Light Mode';
  } else {
    toggleBtn.textContent = 'Switch to Dark Mode';
  }
});
Enter fullscreen mode Exit fullscreen mode

Now it feels extra interactive.

Final Result

When you click the button:

  • The page switches themes.
  • The button text updates.
  • You feel like a boss. 😎

You can try it out in this CodePen
or see it in action in my Portfolio.

This is just a simple way to do it, great for small projects or learning purposes. If you're working on something bigger or with frameworks like React or Vue, you'd want to handle state more properly and maybe even store user preferences in localStorage or cookies — but we’ll save that for another day.

If you made it this far, give yourself a high five!
If you tried out the code, you rock!
You just added one of the most requested UI features with only a few lines of code.

Got questions? Want to see the localStorage version next? Drop it in the comments or send a DM.

Follow me for more simple, beginner-friendly tutorials like this. I keep it short, chill, clear and (hopefully) a little fun.

Top comments (0)