Responsive Advertisement

How to Make a Dark Mode Website with CSS and JavaScript

Dark mode has become a popular feature on websites and apps because it reduces eye strain, saves battery life on OLED screens, and looks sleek. If you want to add a dark mode toggle to your website, the good news is: it’s easier than you think!

In this post, I’ll show you a simple way to create a dark mode switch using just CSS and JavaScript — no heavy frameworks or plugins required.

What is Dark Mode?

Dark mode changes the website’s color scheme from light backgrounds and dark text to dark backgrounds and light text. It gives users an option to choose a theme that’s easier on the eyes, especially in low-light environments.

How to Create Dark Mode with CSS

The core idea is to define two sets of styles:

  • Default light mode styles
  • Dark mode styles that apply when a special CSS class (like .dark-mode) is added to the <body> element.

Here’s an example of CSS for dark mode:

body {
  font-family: sans-serif;
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

The transition makes switching between modes smooth.

How to Toggle Dark Mode with JavaScript

To switch between light and dark mode, we use JavaScript to toggle the .dark-mode class on the <body>.

Here’s a simple function to do that:

function toggleDarkMode() {
  document.body.classList.toggle('dark-mode');
}

Making the Dark Mode Toggle User-Friendly

To create a button that users can click to toggle dark mode, add this HTML:

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

Then connect it with JavaScript:

const button = document.getElementById('darkModeToggle');
button.addEventListener('click', toggleDarkMode);

Saving User Preference with localStorage

To remember the user’s choice even if they reload or revisit the page, use localStorage:

window.addEventListener('DOMContentLoaded', () => {
  const darkModeSetting = localStorage.getItem('dark-mode');
  if (darkModeSetting === 'true') {
    document.body.classList.add('dark-mode');
  }

  const button = document.getElementById('darkModeToggle');
  button.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    const isDark = document.body.classList.contains('dark-mode');
    localStorage.setItem('dark-mode', isDark);
  });
});

Complete Example Code

Here’s a complete HTML example you can copy and paste to test:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dark Mode Toggle Demo</title>
  <style>
    body {
      font-family: sans-serif;
      transition: background-color 0.3s ease, color 0.3s ease;
      background-color: #ffffff;
      color: #000000;
      margin: 40px;
      text-align: center;
    }

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

    button.toggle-btn {
      padding: 10px 20px;
      background-color: #444;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 20px;
      transition: background-color 0.3s ease;
    }

    button.toggle-btn:hover {
      background-color: #666;
    }
  </style>
</head>
<body>

  <h1>How to Make a Dark Mode Website with CSS and JavaScript</h1>
  <p>Click the button below to toggle dark mode. Your preference will be saved for next time you visit!</p>

  <button id="darkModeToggle" class="toggle-btn">Toggle Dark Mode</button>

  <script>
    function toggleDarkMode() {
      document.body.classList.toggle('dark-mode');
      const isDark = document.body.classList.contains('dark-mode');
      localStorage.setItem('dark-mode', isDark);
    }

    window.addEventListener('DOMContentLoaded', () => {
      const darkModeSetting = localStorage.getItem('dark-mode');
      if (darkModeSetting === 'true') {
        document.body.classList.add('dark-mode');
      }

      const button = document.getElementById('darkModeToggle');
      button.addEventListener('click', toggleDarkMode);
    });
  </script>

</body>
</html>

Final Thoughts

Adding a dark mode toggle to your website improves user experience, especially for visitors who prefer a dark theme. With just a few lines of CSS and JavaScript, you can offer this popular feature on your site — no plugins needed!

💬 Ready to add dark mode to your website? Have questions or ideas? Drop a comment below!

Post a Comment

0 Comments

Post a Comment