Skip to content
loading...

Quick tip: Automatically detect Dark Mode with CSS!

joeattardi profile image Joe Attardi twitter logo github logo ・1 min read

Just a quick tip I discovered recently.

You probably already know that macOS and iOS (and perhaps others) support dark mode. What you might not know is that you can detect this with a CSS media query!

Just use this media query:

@media (prefers-color-scheme: dark) {
  // rules in here will only be applied if the user's OS is in dark mode!
}

Hope this helps you develop better UIs!

twitter logo DISCUSS
Discussion
markdown guide
Classic DEV Post from Aug 6 '19

What to put in your portfolio as a beginner web dev

Joe Attardi profile image
JavaScript wrangler. Check out my new book, Modern CSS! https://moderncss.info