如何检测浏览器是否原生支持深色模式功能

我们通常用prefers-color-scheme: dark检测用户是否开启了系统深色模式：

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

但这个方法只能判断用户的系统设置，无法检测浏览器是否支持完整的深色模式能力——也就是我们常说的，浏览器可以根据color-scheme配置自动调整页面默认背景、文本颜色的能力。

我们通常会用如下CSS代码强制页面启用深色模式：

color-scheme: dark;

但部分浏览器（比如安卓端火狐）会直接忽略这个属性，导致强制深色模式失效，这种场景下我们可以通过如下JS代码检测浏览器是否完整支持深色模式，不支持时直接隐藏主题选择功能即可：

// 检测是否支持prefers-color-scheme媒体查询
const supportsPrefersColorScheme = window.matchMedia('(prefers-color-scheme)').media !== 'not all';
// 检测是否支持color-scheme CSS属性
const supportsColorSchemeProp = CSS.supports('color-scheme', 'dark');

// 两个条件同时满足才认为浏览器完整支持深色模式
const darkModeFullySupported = supportsPrefersColorScheme && supportsColorSchemeProp;

// 不支持时隐藏主题切换UI
if (!darkModeFullySupported) {
  document.querySelector('.theme-selector').style.display = 'none';
}

这个检测逻辑刚好可以过滤掉所有不支持自动调整默认样式的浏览器，避免出现主题切换功能可用但切换后样式异常的问题。

内容的提问来源于stack exchange，提问作者vanowm