vue 3 换肤探索测试

import { useDark, useToggle } from '@vueuse/core'
// 获取系统主题
const isDark = useDark()
// 这句代码会在html class上面加dark属性，再次切换点击会去掉dark属性。但与系统换肤功能没关系
const toggleDark = useToggle(isDark)

//如果是没有设置主题，会优先先择这的颜色变量，
如果没定义再去@media (prefers-color-scheme: light) 里面寻找。
不会去@media (prefers-color-scheme: dark)里面寻找属性，
即使html的class=dark。
:root{
  --color-bg:#000000;
}
//html 加class=dark时起作用的变量，覆盖:root里面的变量，优先级高于系统变量
:root.dark{
  --color-bg:#000000;
}

根据系统变化的换肤变量,root里面没定义的，会再此寻找相应变量

@media (prefers-color-scheme: light) {
  :root {
    --color-bg:#ffffff;
  }
}

/*系统主题：暗色*/ 系统切换为暗色时，应用的变量

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:#000000;
  }
}

使用：

background: var(--color-bg);