如何在浏览器 JavaScript 中检测 OS X 是否处于暗模式？ [复制]

Question

类似于“How to detect if OS X is in dark mode in browsers?”，仅适用于 JavaScript。

如何在 Safari/Chrome/Firefox 中检测用户的系统是否处于新的 macOS 暗模式，并将结果作为布尔值获取？

Answer 1

使用matchMedia 函数检查是否符合prefers-color-scheme 媒体规则：

const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// or
const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;

您还可以在开启/关闭深色模式时收到通知：

const media = window.matchMedia('(prefers-color-scheme: dark)');

media.addListener(() => {
  alert(`The mode has changed to ${media.matches ? 'dark' : 'light'}`);
});