使用Window.matchMedia(prefers-color-scheme) 监听系统主题想要生成跟随系统的主题变

想要生成跟随系统的主题变更，那么我们就需要 监听系统的主题变化

想要做到这一点，可以利用 Window.matchMedia() 方法，该方法接收一个 mediaQueryString（媒体查询解析的字符串） ，该字符串我们可以传递 prefers-color-scheme ，即 window.matchMedia('(prefers-color-scheme: dark)') 方法

该方法可以返回一个 MediaQueryList 对象：

该对象存在一个 change 事件，可以监听 主题发生变更 的行为。
同时存在一个 matches 属性，该属性为 boolean 性的值：

.....
let matchMedia
const watchSystemThemeChange = () => {
  if (matchMedia) return
  matchMedia = window.matchMedia('(prefers-color-scheme:dark)')
  // 监听主题变更
  matchMedia.onchange = function () {
    changeTheme(THEME_SYSTEM)
  }
}
const changeTheme = (theme) => {
  let themeClassName = ''
  switch (theme) {
    case THEME_LIGHT:
      themeClassName = 'light'
      break
    case THEME_DARK:
      themeClassName = 'dark'
      break
    case THEME_SYSTEM:
      themeClassName = matchMedia.matches ? 'dark' : 'light'
      break
  }
  document.querySelector('html').className = themeClassName
}
// 初始化主题
export default () => {
  watch(
    () => store.getters.themeType,
    (newValue) => {
      changeTheme(newValue)
    },
    {
      immediate: true
    }
  )
}