暗黑模式适配

window.matchMedia 方法可以用来查询指定的媒体查询字符串解析后的结果。 结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配。

CSS 变量的作用域与 CSS 的”层叠”规则一致，优先级最高的声明生效。所以当 body 上存在 “dark” 类名时，:root .dark 会生效，否则 :root 生效。

.article {
  color: var(--text-color, #eee);
  background: var(--text-background, #fff);
}
:root {
  --text-color: #000;
  --text-background: #fff;
}
:root .dark {
  --text-color: #fff;
  --text-background: #000;
}

使用 matchMedia 匹配主题媒体，深色模式匹配 (prefers-color-scheme: dark) ，浅色模式匹配 (prefers-color-scheme: light) 。

监听主题模式，深色模式时为 body 添加类名 dark，根据 CSS 变量的响应式布局特点，自动生效 dark 类名下的 CSS。

const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
// 判断是否匹配深色模式 if (darkMode && darkMode.matches) {
  document.body.classList.add('dark');
}
// 监听主题切换事件 darkMode && darkMode.addEventListener('change', e => {
  if (e.matches) {
    document.body.classList.add('dark');
  } else {
    document.body.classList.remove('dark');
  }
});

source标签可以用来做图片的日间/夜间切换，参考https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source

example: <img src=“light.png” :class=“$style.plus” @click=“handleChangeCount(‘plus’)” >