How to Create a Dark/Light Mode Toggle Button with JavaScript

Dark mode is a popular feature that improves readability in low-light environments, reduces eye strain, and simply looks cool! In this tutorial, we'll walk through how to create a simple yet effective Dark/Light mode toggle button using plain HTML, CSS, and JavaScript — no frameworks required.

Step 1: Basic HTML Structure

Start with a simple HTML page and add 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>
    <p>This is an example of dark/light mode toggle using JavaScript.</p>
    <button id="toggle-theme">Toggle Dark/Light Mode</button>
  </div>

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

Step 2: Add CSS Styles

Create a styles.css file to define the light and dark themes.

/* Base styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.container {
  padding: 2rem;
  text-align: center;
}

/* Light theme (default) */
body.light-mode {
  background-color: #ffffff;
  color: #000000;
}

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

button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
}

Step 3: Write the JavaScript Logic

Create a script.js file to handle the theme switching and saving preference using localStorage.

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

// Load saved theme from localStorage
const currentTheme = localStorage.getItem('theme');

if (currentTheme === 'dark') {
  body.classList.add('dark-mode');
} else {
  body.classList.add('light-mode');
}

// Toggle between light and dark mode
toggleButton.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  body.classList.toggle('light-mode');

  // Save the user's preference
  const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
  localStorage.setItem('theme', theme);
});

Improve Accessibility

You can make the toggle button more accessible with ARIA labels:

<button id="toggle-theme" aria-label="Toggle dark or light theme">Toggle Dark/Light Mode</button>

Final Touch: Add Icons (Optional)

Want to show a sun/moon icon instead of text? Use emojis or SVG:

<button id="toggle-theme" aria-label="Toggle theme">⏾</button>

And in JavaScript, change the icon dynamically:

toggleButton.textContent = body.classList.contains('dark-mode') ? '☀️' : '⏾';

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

  const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
  localStorage.setItem('theme', theme);

  toggleButton.textContent = theme === 'dark' ? '☀️' : '⏾';
});

Pro Tip

Use prefers-color-scheme in CSS to set an initial theme based on the user's system settings:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f5f5f5;
  }
}

Conclusion

We've now created a fully functional Dark/Light mode toggle using vanilla JavaScript! This is a great feature to include in your websites to enhance UX and accessibility.

Feel free to customize the styling, use icons, or integrate it into a larger project. You can also extend this with CSS variables for more powerful theming.

Next Article ❯