vue自定义项目主题颜色的方法

这里主要用的是css var 自定义变量的方法来控制颜色

首先定义一个css文件

定义根元素:root

main.js当然就引入这个文件了

/* --color 相当于全局定义的一个css变量
 var(--color) 用于引用
 在页面样式的引用中，你将会看到 */
:root {
  --color: rgb(255, 255, 255);
  --bck: rgb(196, 192, 255);
  --tablehover: rgb(4, 51, 52);
  --white: rgb(255, 255, 255);
  /* 原色为白色,切换后的颜色为黑色,设置字体时使用 */

  --black: rgb(0, 0, 0);
  /* 原色为黑色,切换后的颜色为白色,设置边框时使用 */

........根据自己需求定义 建议写好注释
}

然后我们在相对应的页面 如果要控制这个类或者按钮的颜色
就这样使用

  .deletex {
    color: var(--black);
    position: absolute;
    top: -12px;
    left: 4px;
  }

然后在换肤的按钮切换方法上进行对应的代码设置

 ChangeBGC() {
  	let root = document.querySelector(":root");
 	if (this.flag) {
        root.style.setProperty("--color", "rgb(253, 44, 79)");
        root.style.setProperty("--tablehover", "rgb(255,255,255)");
        root.style.setProperty("--white", "rgb(0,0,0)");
        this.flag = false;
        // ---------------------分界线----------------------------------//
      } else {
        root.style.setProperty("--color", "rgb(255, 255, 255)");
        root.style.setProperty("--tablehover", "rgb(4, 51, 52)");
        root.style.setProperty("--white", "rgb(255,255,255)");
        this.flag = true;
      }
   }

就像如图一样 当然你有多个主题你用switch判断修改代码就是了
这里就展示基本的两种主题的切换

这是我第一个项目的需求 现在看很简单 当时惶恐了很久
当然还有别的方法没去研究 有更简单或者更好维护的方法建议小伙伴评论留言哦