前端主题色的切换

        我在项目中想有2套主题，点击即切换风格，就是一套暗黑主题、一套白色主题，该怎么实现呢？

        我的解决方案是:在根标签html上绑定自定义属性data-v-css，根据他的值去切换主题的样式

//自定义标签 data-v-css 设定white为白色主题,black为暗黑主题

全局引入css文件，也就是区分主题的css变量

html[data-v-css="white"] {
  --bgc:#fff;
}

html[data-v-css="black"] {
  --bgc:#000;
}

使用方式就相当于使用css的变量

        当html标签上的自定义属性是white时，var(--bgc)就是#fff

        当html标签上的自定义属性是black时，var(--bgc)就是#000

 #app {
    background: var(--bgc);
 }

最后就是如何切换主题了，其实很简单，只需要获取html标签直接该自定义属性的值就可以啦~

const html = document.querySelector('html');
html.setAttribute('data-v-css', '想要的值 white或者black就可以切换啦~');