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

Posted 2023-03-06

【中文标题】如何在浏览器 JavaScript 中检测 OS X 是不是处于暗模式？ [复制]

【英文标题】：How to detect if OS X is in dark mode in browser JavaScript? [duplicate]如何在浏览器 JavaScript 中检测 OS X 是否处于暗模式？ [复制]

【发布时间】：2019-09-05 09:26:09

【问题描述】：

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

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

【参考方案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'`);
);