How to Toggle Dark Mode Using CSS Variables: Simple Guide with Code

Add a Dark Mode Toggle Using CSS Variables (Step-by-Step Guide)

Introduction

Dark mode has become a popular design trend in modern websites and apps. It’s easy on the eyes, improves battery life on OLED screens, and gives users a choice in how they view content. In this tutorial, you'll learn how to implement a dark mode toggle using CSS variables and JavaScript, step by step.

What Are CSS Variables?

CSS Variables (also called custom properties) let you store reusable values in your CSS. They start with -- and are usually defined inside the :root selector. For example:

These can be reused like this:

✅ Step-by-Step: Create a Dark Mode Toggle

🧩 Step 1: HTML Setup

We’ll start with a simple HTML file that includes 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 Mode Toggle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to My Website</h1>
    <p>This is a demo of dark mode using CSS variables.</p>
    <button id="toggle-theme">Toggle Dark Mode</button>
  </div>

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

Explanation:

We added a heading, paragraph, and a button to toggle the theme.
The button has an id="toggle-theme" which we’ll use in JavaScript.

🎨 Step 2: CSS Styling with Variables

Create a style.css file with the following content:

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 2rem;
  transition: background-color 0.3s, color 0.3s;
}

.container {
  max-width: 600px;
  margin: auto;
  text-align: center;
}

button {
  padding: 10px 20px;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  cursor: pointer;
  margin-top: 20px;
  transition: background-color 0.3s, color 0.3s;
}

/* Dark Mode Variables */
body.dark-mode {
  --bg-color: #121212;
  --text-color: #ffffff;
  --button-bg: #333333;
  --button-text: #ffffff;
}

Explanation:

We define default (light mode) values in :root.
When the body has the class dark-mode, the variables change.
We use var(--name) to apply these values throughout the site.
Transitions are added for a smooth effect.

⚙️ Step 3: JavaScript for Toggle Logic

Create a script.js file with this code:

Explanation:

We grab the toggle button by its ID.
On click, we toggle the dark-mode class on the <body>.
When dark-mode is active, the CSS variable values automatically switch.

💡 Bonus Tip: Save Theme Preference (Optional)

Want the site to remember user preference? Update your script.js like this:

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

// Load saved theme
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark-mode');
}

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

  // Save preference
  if (document.body.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

Explanation:

We check localStorage for the saved theme on page load.
When toggled, we update localStorage to remember the choice.

🧪 Final Output (Preview)

When you click the button, the background, text, and button colors will change based on CSS variables. The transition is smooth, and users can switch modes anytime.

🎯 Why Use CSS Variables for Dark Mode?

Cleaner Code: Centralize your color settings.
Easier Maintenance: Change theme colors in one place.
Dynamic Switching: Use JavaScript to update the class, and variables handle the rest.

✅ Conclusion

Congratulations! 🎉 You’ve successfully created a dark mode toggle using CSS variables and JavaScript. This is a scalable and modern way to offer light/dark themes on your website.

📌 Summary Table

Feature	Description
CSS Variables	Define theme colors using `--variable`
JavaScript Toggle	Add or remove `dark-mode` class
Smooth Transition	CSS `transition` for pleasant effect
Save Preference	Use `localStorage` to remember theme

How to Toggle Dark Mode Using CSS Variables: Simple Guide with Code

Follow us on

Introduction

What Are CSS Variables?

✅ Step-by-Step: Create a Dark Mode Toggle

🧩 Step 1: HTML Setup

🎨 Step 2: CSS Styling with Variables

⚙️ Step 3: JavaScript for Toggle Logic

💡 Bonus Tip: Save Theme Preference (Optional)

🧪 Final Output (Preview)

🎯 Why Use CSS Variables for Dark Mode?

✅ Conclusion

📌 Summary Table

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us