How to Add Dark Mode to Any Website

1. Why Add Dark Mode?

• Improves readability at night.
• Reduces eye strain.
• Looks modern and user-friendly.

2. Basic Approach

You can add dark mode to a website using CSS variables and JavaScript toggle.

3. Step-by-Step Guide

Step 1: Define CSS Variables

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Step 2: Add Dark Mode Styles

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

Step 3: Add a Toggle Button in HTML

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

Step 4: Use JavaScript to Switch Modes

const toggleBtn = document.getElementById("darkModeToggle");
const body = document.body;

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

4. Save User Preference (Optional)

You can save the mode in localStorage so users keep their choice when they revisit.

toggleBtn.addEventListener("click", () => {
  body.classList.toggle("dark-mode");
  if (body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

window.onload = () => {
  if (localStorage.getItem("theme") === "dark") {
    body.classList.add("dark-mode");
  }
};

5. Bonus: Auto-Detect System Theme

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #ffffff;
  }
}