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 modes. 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 the 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 a 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 a 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.