JavascriptHow-ToBeginner · 3 min read

How to Create Dark Mode Toggle in JavaScript Easily

To create a dark mode toggle in JavaScript, use a button that adds or removes a dark-mode class on the body element. Then, define CSS styles for both normal and dark modes, and toggle the class on button click to switch themes.

📐

Syntax

The basic syntax involves toggling a CSS class on the body element using JavaScript's classList.toggle() method. This changes the page style dynamically.

document.body.classList.toggle('dark-mode'): Adds the dark-mode class if not present, removes it if present.
button.addEventListener('click', function): Runs the toggle function when the button is clicked.
CSS defines styles for body and body.dark-mode to switch colors.

html

<button id="toggle">Toggle Dark Mode</button>

<script>
  const button = document.getElementById('toggle');
  button.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
  });
</script>

<style>
  body {
    background-color: white;
    color: black;
  }
  body.dark-mode {
    background-color: black;
    color: white;
  }
</style>

Output

A button labeled 'Toggle Dark Mode' that switches the page background and text colors between white/black and black/white when clicked.

💻

Example

This example shows a complete webpage with a button that toggles dark mode on and off by changing the background and text colors.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dark Mode Toggle Example</title>
<style>
  body {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
    padding: 20px;
  }
  body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
  }
  button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
</head>
<body>
  <button id="toggle">Toggle Dark Mode</button>
  <h1>Welcome to Dark Mode Toggle</h1>
  <p>Click the button above to switch between light and dark themes.</p>

  <script>
    const toggleButton = document.getElementById('toggle');
    toggleButton.addEventListener('click', () => {
      document.body.classList.toggle('dark-mode');
    });
  </script>
</body>
</html>

Output

A webpage with a button labeled 'Toggle Dark Mode'. Clicking the button changes the background from white to dark gray and text from black to light gray, and toggles back on next click.

⚠️

Common Pitfalls

Common mistakes when creating a dark mode toggle include:

Not defining the dark-mode CSS class, so toggling does nothing visible.
Forgetting to add a smooth transition, causing abrupt color changes.
Using inline styles instead of CSS classes, which makes toggling harder to manage.
Not targeting the correct element (usually body) for the class toggle.

javascript

/* Wrong way: Inline style change without CSS class */
const button = document.getElementById('toggle');
button.addEventListener('click', () => {
  if (document.body.style.backgroundColor === 'black') {
    document.body.style.backgroundColor = 'white';
    document.body.style.color = 'black';
  } else {
    document.body.style.backgroundColor = 'black';
    document.body.style.color = 'white';
  }
});

/* Right way: Use CSS class toggle */
button.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
});

📊

Quick Reference

Summary tips for creating a dark mode toggle:

Use a button to trigger toggling.
Toggle a CSS class on the body element.
Define styles for normal and dark modes in CSS.
Add smooth transitions for better user experience.
Keep JavaScript simple by only toggling classes.

✅

Key Takeaways

Toggle a CSS class on the body element to switch between light and dark modes.

Define separate CSS styles for normal and dark modes using the toggled class.

Use a button with a click event listener to trigger the toggle.

Add CSS transitions for smooth color changes.

Avoid inline style changes; prefer class toggling for cleaner code.