Toggle Dark Mode with JavaScript — Simple Example with One Click

Introduction

Toggle Dark Mode with JavaScript is a popular feature in modern web design. With just a small snippet, you can allow your users to switch between light and dark themes instantly.

How to Toggle Dark Mode with JavaScript

Here’s a simple example using a CSS class and a toggle button:

<button onclick="document.body.classList.toggle('dark-mode')">Toggle Dark Mode</button>

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

How This Works

This Toggle Dark Mode with JavaScript example toggles a dark-mode class on the body. You can style this class in your CSS to apply dark colors across your site.

Why Use This?

Toggle Dark Mode with JavaScript is a user-friendly addition that enhances accessibility and modernizes your UI.

Common Mistake

Forgetting to provide enough contrast between text and background can make dark mode hard to read.

Pro Tip

Save the user’s preference to localStorage to persist their choice across page loads.

Related Snippet

Scroll to Top Button with JavaScript