css

Quick tip: Automatically detect Dark Mode with CSS!

joeattardi

Joe Attardi

Posted on February 28, 2020

Quick tip: Automatically detect Dark Mode with CSS!

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!
}
Enter fullscreen mode Exit fullscreen mode

Hope this helps you develop better UIs!

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
joeattardi
Joe Attardi

Posted on February 28, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About