CssHow-ToBeginner · 3 min read

How to Create Dark Mode Using CSS Variables Easily

Use CSS variables to define colors for light and dark themes, then switch the variables inside a data-theme attribute or a class on the html or body element. This lets you toggle dark mode by changing the theme attribute or class, updating colors everywhere automatically.

📐

Syntax

Define CSS variables inside selectors like :root for default (light) theme. Then override these variables inside a dark mode selector, such as [data-theme='dark']. Use the variables in your styles with var(--variable-name).

:root holds default colors.
[data-theme='dark'] overrides variables for dark mode.
Use var(--color-name) to apply colors.

css

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

[data-theme='dark'] {
  --background-color: #121212;
  --text-color: #e0e0e0;
}

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

💻

Example

This example shows a simple webpage with a button to toggle dark mode by changing the data-theme attribute on the html element. The colors update automatically using CSS variables.

html

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode with CSS Variables</title>
  <style>
    :root {
      --background-color: #ffffff;
      --text-color: #000000;
      --button-bg: #e0e0e0;
      --button-text: #000000;
    }
    [data-theme='dark'] {
      --background-color: #121212;
      --text-color: #e0e0e0;
      --button-bg: #333333;
      --button-text: #ffffff;
    }
    body {
      background-color: var(--background-color);
      color: var(--text-color);
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      transition: background-color 0.3s, color 0.3s;
    }
    button {
      background-color: var(--button-bg);
      color: var(--button-text);
      border: none;
      padding: 1rem 2rem;
      font-size: 1rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
    }
    button:focus {
      outline: 2px solid #007acc;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <h1>Dark Mode Example</h1>
  <button id="toggle-theme" aria-pressed="false" aria-label="Toggle dark mode">Toggle Dark Mode</button>

  <script>
    const button = document.getElementById('toggle-theme');
    button.addEventListener('click', () => {
      const html = document.documentElement;
      const currentTheme = html.getAttribute('data-theme');
      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
      html.setAttribute('data-theme', newTheme);
      button.setAttribute('aria-pressed', newTheme === 'dark' ? 'true' : 'false');
    });
  </script>
</body>
</html>

Output

A white page with black text and a gray button labeled 'Toggle Dark Mode'. Clicking the button switches the background to dark gray, text to light gray, and button colors invert accordingly.

⚠️

Common Pitfalls

Common mistakes when creating dark mode with CSS variables include:

Not defining all colors as variables, causing some elements to not change color.
Forgetting to update the theme attribute or class in JavaScript, so the dark mode never activates.
Using fixed colors directly in CSS instead of variables, which breaks the theme switch.
Not adding smooth transitions, making the color change abrupt and jarring.

css

/* Wrong: fixed colors prevent theme switching */
body {
  background-color: white;
  color: black;
}

/* Right: use variables for colors */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

📊

Quick Reference

Tips for using CSS variables for dark mode:

Define all theme colors as variables in :root and override in a dark mode selector.
Toggle dark mode by changing a class or attribute on html or body.
Use var(--variable-name) everywhere for colors.
Add CSS transitions for smooth color changes.
Ensure accessibility by maintaining good contrast in both themes.

✅

Key Takeaways

Use CSS variables to define colors for light and dark themes for easy switching.

Toggle dark mode by changing a class or attribute on the root element to override variables.

Always use variables in your CSS instead of fixed colors to enable theme changes.

Add smooth transitions to make theme switching visually pleasant.

Check color contrast to keep your site accessible in both light and dark modes.