前端主题颜色切换的方案

1、最简单的换肤方式，利用class 名称写两个方案

    .body1{
        color: red;
    }
    .body2{
        color: blue;
    }

点击切换主题时切换对应得class就可以

2、准备多套CSS文件

/* a.css */
    .a{
        color: red;
    }
    /* b.css */
    .b{
        color: blue;
    }

点击切换主题时引入不同方案的css

3、现代前端常用的切换主题 scss less预处理

// css
@import ".....red.scss"
/* a.css */
    .a{
        color: $red;
    }
/* b.css */
    .b{
        color: $blue;
    }
// javascript
import "./../scss/indexBlue.scss"
import "./../scss/indexRed.scss"


 if (type == "status") {
       if (e == "1") {//按需引入
           this.dropdownStatus = "蓝版"
           this.body = "blue_body"
           this.$emit("body", this.body)
           this.$emit("getCourseCountBox")
       } else {
           this.dropdownStatus = "红版"
           this.body = "red_body"
           this.$emit("body", this.body)
           this.$emit("getCourseCountBox")
       }
   }

写一套css，复制一份出来，不需做修改，所有切换主题变化的部分用变量代替，写两套scss变量文件，只需要在两套scss变量文件内写i相应的变量即可

4、CSS 变量换肤

   <style>
      :root {
        --theme-color: red /* css 变量赋值位置 */
      }
      .title {
        color: var(--theme-color) /* 用css变量标记颜色 */
      }
    </style>
    <script>
      function changeColor(color = 'blue') {
        document.documentElement.style.setProperty("--theme-color",color);
      }
    </script>

只需一套CSS文件、操作都在js里

还有其他方案也都大同小异 根据自己项目需求来决定方案。