Dark Mode with CSS Variables and Media Queries

Table of Contents

1. Introduction to Dark Mode
2. Benefits of Using CSS Variables
3. Setting Up Light and Dark Themes
4. Detecting System Theme with Media Queries
5. Switching Themes with JavaScript
6. Accessibility Considerations
7. Conclusion

1. Introduction to Dark Mode

Dark mode has become a widely adopted UI feature that allows users to experience websites with a darker color palette, which can reduce eye strain, save battery on OLED screens, and offer a visually appealing alternative to bright interfaces.

In modern web development, CSS Variables combined with Media Queries make implementing dark mode both powerful and efficient.

2. Benefits of Using CSS Variables

CSS Variables (also known as custom properties) allow you to define reusable values for colors, spacing, fonts, and more. This makes them ideal for theming.

Example:

cssCopyEdit:root {
  --bg-color: white;
  --text-color: black;
}

Now you can reuse these throughout your stylesheet:

cssCopyEditbody {
  background-color: var(--bg-color);
  color: var(--text-color);
}

If you later redefine the variables, all instances using them will update automatically.

3. Setting Up Light and Dark Themes

Default Theme (Light)

Start by defining your light theme in the :root selector:

cssCopyEdit:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --primary-color: #007bff;
}

Then apply these variables in your components:

cssCopyEditbody {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
}

a {
  color: var(--primary-color);
}

Dark Theme Override

Now define the dark theme inside a @media query:

cssCopyEdit@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f0f0f0;
    --primary-color: #0d6efd;
  }
}

When a user’s system is set to dark mode, the prefers-color-scheme: dark media query will trigger, and your dark theme variables will override the defaults.

4. Detecting System Theme with Media Queries

The prefers-color-scheme media feature detects the user’s system theme preference:

cssCopyEdit@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
}

This is purely CSS-based and requires no JavaScript, making it very efficient and performant.

5. Switching Themes with JavaScript

To give users manual control over the theme (e.g., a toggle switch), you can override the system setting by updating a class on the root HTML element.

HTML Example:

htmlCopyEdit<button id="themeToggle">Toggle Theme</button>

CSS Setup:

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

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}

JavaScript:

javascriptCopyEditconst toggle = document.getElementById('themeToggle');
const html = document.documentElement;

toggle.addEventListener('click', () => {
  const currentTheme = html.getAttribute('data-theme');
  if (currentTheme === 'dark') {
    html.setAttribute('data-theme', 'light');
  } else {
    html.setAttribute('data-theme', 'dark');
  }
});

This allows dynamic switching and gives users full control over their experience.

6. Accessibility Considerations

• Contrast: Ensure high enough contrast between background and text for both themes.
• Animation Reduction: Respect prefers-reduced-motion settings.
• Persist Theme Choice: If using JavaScript to toggle themes, consider saving user preferences in localStorage.

javascriptCopyEdit// Save preference
localStorage.setItem('theme', 'dark');

// On page load
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-theme', savedTheme);
}

7. Conclusion

Dark mode enhances the user experience and has become a standard feature in modern UI design. With CSS Variables and the prefers-color-scheme media query, implementing dark mode is not only easy but also efficient and user-friendly.

By layering JavaScript logic, you can further personalize the experience and give users full control over their theme preference.