Creating Dark Mode Themes with Media Queries and Css Variables

by

Dark mode has become increasingly popular in recent years, offering a more comfortable viewing experience especially in low-light conditions. Creating a dark mode theme for your website can enhance user experience and accessibility. This article explores how to implement dark mode using CSS media queries and CSS variables.

Understanding Media Queries for Dark Mode

Media queries allow you to apply different CSS styles based on the user’s device or preferences. For dark mode, the prefers-color-scheme media feature detects if the user has requested a dark color scheme in their system settings.

Example of a media query for dark mode:

@media (prefers-color-scheme: dark) {
  /* Dark mode styles go here */
}

Using CSS Variables for Theme Colors

CSS variables (custom properties) make it easy to switch themes dynamically. Define variables for colors in the :root selector for light mode, and override them within the media query for dark mode.

Example CSS:

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

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

Applying CSS Variables in Your Styles

Use the CSS variables in your styles to ensure they adapt based on the theme:

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

Implementing in Your Website

To add this to your website, include the CSS in your stylesheet or within a <style> tag in the header. Make sure to test the theme in different system settings to verify the dark mode activates correctly.

Conclusion

Using media queries with prefers-color-scheme and CSS variables provides a flexible and maintainable way to create dark mode themes. This approach ensures your website adapts seamlessly to user preferences, enhancing accessibility and user satisfaction.