🌙 Dark Mode in 5 Minutes: A Beginner's Guide Using CSS Variables

Dark mode is more than just a trend — it's a user-friendly feature that improves readability and reduces eye strain. The best part? Implementing dark mode can be super simple using CSS variables and a pinch of JavaScript.

Let’s build a light/dark theme toggle in under 5 minutes!

🧠 Why Use :root and CSS Variables?

Using CSS variables (also called custom properties) allows you to:

Define your color scheme in one place

Easily switch themes dynamically

Avoid repeating values across your stylesheets

⚙️ Step 1: Setup Your HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Dark Mode in 5 Minutes</h1>
    <button id="toggle-theme">Toggle Theme</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

🎨 Step 2: Create Light & Dark Themes Using :root

/* styles.css */

:root {
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --button-bg: #e2e8f0;
  --button-text: #000000;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f5f5f5;
  --button-bg: #2d3748;
  --button-text: #ffffff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  transition: all 0.3s ease;
}

button {
  padding: 10px 20px;
  margin-top: 20px;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  cursor: pointer;
  border-radius: 6px;
}

💡 Step 3: Add JavaScript to Toggle Themes

// script.js

const toggleBtn = document.getElementById("toggle-theme");

toggleBtn.addEventListener("click", () => {
  const currentTheme = document.documentElement.getAttribute("data-theme");

  if (currentTheme === "dark") {
    document.documentElement.removeAttribute("data-theme");
    localStorage.setItem("theme", "light");
  } else {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  }
});

// Optional: Remember user’s preference
window.addEventListener("DOMContentLoaded", () => {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "dark") {
    document.documentElement.setAttribute("data-theme", "dark");
  }
});

✅ Done! Now Test It

Click the "Toggle Theme" button to switch between light and dark themes. Your site will:

Animate smoothly between modes

Remember the user's last preference (thanks to localStorage)

Stay maintainable by using variables 🎉

🧪 Bonus: Add More Theming Flexibility

Want to go beyond dark mode? You can add multiple themes or responsive theme changes using the same concept!

💬 What’s Your Favorite Dark Mode Trick?

Let me know in the comments if you've built a dark mode toggle differently — or share a link to your own themed site!

Preeti yadav @preeti_yadav