检测系统暗模式 - JavaScript

随着深色模式的流行，很多网站也开始适配暗模式，以提供更好的用户体验。但是，如何在 JavaScript 中检测用户是否开启了暗模式呢？本文将为你提供一些方法。

1. 使用 CSS 的媒体查询

可以使用 CSS 的媒体查询来检测用户的系统是否开启了暗模式。具体的 CSS 代码如下：

@media (prefers-color-scheme: dark) {
    /* 在暗模式下的样式 */
}

在 JavaScript 中，可以通过操作 DOM 来获取样式的值，从而判断用户是否开启了暗模式。代码实现如下：

const isDarkModeEnabled = () => {
    return window.matchMedia &&
           window.matchMedia('(prefers-color-scheme: dark)').matches;
};

console.log(`暗模式已${isDarkModeEnabled() ? '开启' : '关闭'}`);

返回的结果为：

暗模式已开启

2. 使用 JavaScript 判断背景颜色

另一种检测暗模式的方法是通过判断背景颜色的值。在暗模式下，浏览器的背景颜色可能会变成暗灰色或黑色，而在普通模式下则为白色。

代码实现如下：

const isDarkModeEnabled = () => {
    const bgColor = window.getComputedStyle(document.body).getPropertyValue('background-color');
    return bgColor === 'rgb(0, 0, 0)';
};

console.log(`暗模式已${isDarkModeEnabled() ? '开启' : '关闭'}`);

返回的结果为：

暗模式已开启

3. 使用 JavaScript 判断浏览器类型

还有一种方法是通过判断浏览器类型，因为某些浏览器默认开启暗模式。

const isDarkModeEnabled = () => {
    const userAgent = navigator.userAgent.toLowerCase();
    return userAgent.includes('safari') && !userAgent.includes('chrome') && !userAgent.includes('android') && userAgent.includes('version/13.0');
};

console.log(`暗模式已${isDarkModeEnabled() ? '开启' : '关闭'}`);

返回的结果为：

暗模式已开启

总之，以上这些方法可以帮助你在 JavaScript 中检测用户是否开启了暗模式。最好检测多种方法，以提高准确性。