使用 JavaScript 检测系统主题色

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 3 天，点击查看活动详情

很多网站都有主题色功能，通常至少会有浅色和暗色，默认情况下主题还会跟随系统。

那是如何实现检测系统主题色的呢？
在 Web API 中提供了一个 metchMedia 函数，它的功能就是检测系统主题色。
它接受一个媒体查询字符串作为参数，返回一个 MediaQueryList 对象。
MediaQueryList 对象有一个 matches 属性，它是个布尔值，用于表示媒体查询字符串是否匹配成功。
下面我们用简单的代码来演示一下如何获取系统主题色。

if(matchMedia('(prefers-color-schmem: dark)').matches) {
  console.log('当前是暗色主题')
}
复制代码

媒体查询 prefers-color-scheme 是用来检测系统颜色的 CSS 媒体特性。
后面的参数可以是 light 或者 dark，分别表示浅色主题和暗色主题。
当系统的主题色发生改变时，我们还可以通过监听 MediaQueryList 对象来做一些逻辑处理。

const mediaQueryList = matchMedia('(prefers-color-scheme: dark)')
mediaQueryList.addEventListener('change', (evt) => {
  const theme = evt.matches ? 'dark' : 'light'
})
复制代码

更改网站主题色的策略并非只有跟随系统。
另一种比较好的做法是根据时间来设置默认的主题色，如果采用时间的策略设置主题色，要注意区分时区。