Mastering Dark Mode with CSS

CSS Dark Mode Web Design Frontend Development Web Development Tailwind CSS

Learn how to implement dark mode in your website using the powerful `prefers-color-scheme` feature. We’ll also explore advanced techniques like CSS Variables for greater flexibility and maintainability.

🌗 Implementing Dark Mode Using `prefers-color-scheme` in CSS

Ever noticed how some websites seamlessly switch between light and dark themes based on your system settings? This isn't magic—it's the power of the prefers-color-scheme media feature in CSS. In this post, we'll explore how to implement this feature to enhance user experience.

🧠 Understanding `prefers-color-scheme`

The prefers-color-scheme media feature allows developers to detect if a user has requested a light or dark color theme. This enables the creation of responsive designs that align with user preferences without additional JavaScript.

🧪 Practical Example

Let's consider a simple HTML structure for a blog article:

<article>
  <h1>Understanding CSS Media Queries</h1>
  <p>Media queries are a powerful tool in responsive design...</p>
  <a href="#">Read more</a>
</article>

Default (Light Mode) Styles

article {
  background-color: #ffffff;
  color: #000000;
}
 
a {
  color: #1a0dab;
}

Dark Mode Styles Using `prefers-color-scheme`

@media (prefers-color-scheme: dark) {
  article {
    background-color: #121212;
    color: #ffffff;
  }
 
  a {
    color: #8ab4f8;
  }
}

With this setup, users who have set their system to dark mode will automatically see the dark-themed version of your site.

📌 Here's How Real Devs Do It: Advanced Dark Mode with CSS Variables

While prefers-color-scheme is a great way to add dark mode to your website, real devs often take it a step further by incorporating CSS Variables. This adds more flexibility and scalability to your dark mode implementation, especially on larger websites.

Why is this Better?

By using CSS Variables, you can easily manage and customize your themes without writing repetitive styles. Variables allow you to define your color scheme (or other properties) in one place and then reference them throughout your CSS. This reduces redundancy and makes it easier to change the theme in the future—just update the variable, and the change propagates throughout the entire site.

Take this example:

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

Instead of manually specifying background colors and text colors in multiple places, you only need to reference the variables. This makes it much easier to tweak the design for different themes, and it's a lot more maintainable as your project grows.

You can even offer custom theme options for your users or dynamically switch themes using JavaScript by modifying these variables. This approach offers more control over your design and is much more dynamic than using static CSS rules.

✅ Key Takeaways

Utilize @media (prefers-color-scheme: dark) to define dark mode styles.
Place light mode styles outside the media query as the default.
This approach enhances accessibility and user satisfaction by respecting user preferences.

📹 Watch the Reel

Want a quick visual breakdown of this concept? Check out the 30-second reel on my Instagram:

👉 Watch on Instagram

👉 Watch on Youtube

If you’re interested in a full, in-depth tutorial on implementing dark mode with CSS and even more advanced tips, drop a comment, and I’ll create a full-fledged video for you!

Implementing dark mode using prefers-color-scheme is a straightforward yet effective way to improve user experience. By aligning your website's appearance with system preferences, you make your frontend smarter and more considerate.

If this helped, consider following @harshshah.codes on Instagram and @harshshahcodes on Youtube on for more quick frontend tips and breakdowns like this.

Mastering Dark Mode with CSS

Subscribe to Our Newsletter