# Dark Mode Made Easy

Adding a dark mode toggle for websites has been a pain. It typically involves @media queries, extra CSS classes, 87 npm dependencies, and maybe even Javascript and cookies to handle switching.

But as of 2024, this has become super easy with only CSS, thanks to light-dark!

First, add this to your CSS:

:root {
  color-scheme: light dark;
}

Now, anywhere you want to use a different color for light and dark you can just specify both of them in the same place! It is so easy. 😇

h1, h2, h3, h4, h5, h6 {
  color: light-dark(#000, #eee);
}

#main-nav-wrapper {
  background-color: light-dark(#7FCE36, #37AFFF);
}

#main-content {
  background: light-dark(#fff, #1b1d22);
  color:      light-dark(#000, #eee);
}

And this is what we get just by changing between the "light" and "dark" theme in the browser, or when your operating system decides it's night time.

You can read additional details on MDN, but we essentially covered everything already. 🤯

As an aside, Tonsky takes a completely different approach to dark mode, which I love so much.

# Dark Mode Made Easy

Related Notes

css