如何在浏览器中检测操作系统是处于深色还是浅色模式？

有时，你想为一个在Chrome/Firefox和Safari浏览器上打开的页面应用样式，在OSX黑暗模式下。

OSX提供了两个themes ，以表示光明和黑暗模式。这种主题定制在Windows中也有提供。

• light:它表示一个操作系统的浅色
• dark:它使用下划线操作系统的暗色

如何在CSS中检测操作系统的暗光模式并举例说明？

CSS提供了媒体查询，可以在Chrome和Firefox中进行检测。prefers-color-scheme 是一个CSS媒体查询，用于检测深色或浅色。

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

根据Mozilla，它支持所有流行的浏览器。

对于webkit和safari浏览器，你可以使用prefers-dark-interface 媒体查询。

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

检测深色或浅色模式主题的JavaScript

[matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) 在 对象中，用于返回媒体查询列表对象，该对象返回与媒体查询字符串对象相匹配的DOM 这里是一个检查操作系统深色主题的例子Window

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

下面是一个检查操作系统深色主题的例子:

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

总结

综上所述，本教程解释了如何检测操作系统的黑暗或光明主题，并通过CSS和javascript应用样式或逻辑。