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

Google Advertisement

Learn how to add a dark mode toggle to your website using CSS variables and JavaScript. Step-by-step tutorial with code examples, perfect for beginners.

Published on 27 May 2025

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?

🔥 Read with Full Features on Our Website

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.
Google Advertisement

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

Google Advertisement

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:

Google Advertisement

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

Google Advertisement

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

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

Recommended Posts

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

How to Embed a YouTube Video in HTML Using iframe (Step-by-Step Guide)

Modern CSS Login Form UI Design Tutorial for Beginners

Simple File System Program in C for Create, Read, and Write Operations

Smart Memory Management in OS: Simulator using First Fit, Best Fit & Worst Fit

Simple Simulation of FCFS and Round Robin Scheduling in OS with Code