{

How to detect if the OS is in a dark or light mode in browsers?


Sometimes, you want to apply styles for a page opened in Chrome/Firefox and Safari on OSX Dark mode.

OSX provides two themes to indicate light and dark mode. This theme customization provides in Windows also.

  • light: It indicates the light colors of an OS
  • dark: It uses dark colors of an underline OS

How to detect OS Dark light mode in CSS with examples?

CSS provides media queries to detect in Chrome and Firefox. prefers-color-scheme is a CSS media query to detect dark or light colors.

@media (prefers-color-scheme: dark) {
  body {
    background: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: black;
  }
}

As per mozilla, It supports all popular browsers.

For webkit and safari browsers, you can use prefers-dark-interface media query.

@media (prefers-dark-interface) { 
    background: white; 
}

javascript to detect dark or light mode theme

[matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in Window object used to return MediaQuery list object that returns matched DOM matches with media query string object Here is an example to check dark theme for Operating System

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   console.log("apply styles for OS Dark theme  ")
}

Here is an example to check dark theme for Operating System

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
   console.log("apply styles for OS Light theme  ")
}

Conclusion

To summarize, This tutorial explains how to detect OS dark or light themes and apply styles or logic with CSS and javascript.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.