DEV Community

Preeti yadav
Preeti yadav

Posted on

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

#webdev #javascript #productivity #beginners

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>
Enter fullscreen mode Exit fullscreen mode

🎨 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;
}
Enter fullscreen mode Exit fullscreen mode

💡 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");
  }
});
Enter fullscreen mode Exit fullscreen mode

✅ 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!

Top comments (6)

Collapse
 
madhurima_rawat profile image
Madhurima Rawat •

This is great! I’ve used a similar approach in my portfolio — just haven’t implemented localStorage yet. Sounds like a solid idea!

We could even improve it further by fetching the system theme as the default 🌙. I was actually thinking of adding that too. Great article, as always! 🚀

Collapse
 
preeti_yadav profile image
Preeti yadav •

Thank you so much, Madhurima! 😊

Yes, adding localStorage really helps with preserving user preference — definitely a small touch that improves UX.

And you're absolutely right — using the system's preferred theme as the default would make it even smoother.

Let me know when you implement it — would love to check it out!

Collapse
 
nevodavid profile image
Nevo David •

pretty cool honestly, i always end up messing up the variable names when i try this - you think there's ever a time dark mode doesn't actually make things better

Collapse
 
preeti_yadav profile image
Preeti yadav •

Thanks, Nevo! 😄
Haha, totally get the variable name chaos — I’ve been there too! I started using a naming convention like --clr-bg, --clr-text, etc., and grouping them in comments — really helps keep things tidy.

As for dark mode not always being better — yes, absolutely! Some situations come to mind:

Daylight viewing: On bright screens or outdoors, light mode can actually improve readability.

Branding: For some brands (especially minimalist or clinical designs), light mode communicates the feel better.

Accessibility: High contrast themes can sometimes be more effective than a typical dark palette for visually impaired users.

It’s all about giving users the option — that’s where the real magic is 🔥

Collapse
 
jayden_lee_3c9e95e50152a1 profile image
Jay lee •

That's very practical.
Let's share our issues together.
Keep in touch. jaylee518.watcher@gmail.com

Collapse
 
preeti_yadav profile image
Preeti yadav •

Thanks a lot, Riku! 😊
Really glad you found it practical.
Let’s definitely stay connected and share knowledge! You can find me on LinkedIn here: linkedin.com/in/preeti-yadav5443/
Looking forward to staying in touch! 🙌