换主题颜色

主要知识：

• css自定义变量:
  :root 文档的根元素，这是一个放自定义属性的好地方，因为我们可以根据其他个别特别的样式的选择性来覆盖自定义属性，语法是 --变量名
• 自定义变量的使用:
  用var( --变量名)
• 通过js动态设置变量值 :
  使用 document.body.style.setProperty(’ --变量名’, ‘变量值’)

直接上码记录一下简单的demo（用的vue和less）

  <template>
  <div id="test">
    <button @click="skin(1)">皮肤1</button>
    <button @click="skin(2)">皮肤2</button>
    <button @click="skin(3)">皮肤3</button>
    <p>使用 document.body.style.setProperty('--bg', 'red'); 来设置变量</p>
    <p>使用 document.body.style.getPropertyValue('--bg'); 来获取变量</p>
    <p>使用 document.body.style.removeProperty('--bg'); 来删除变量</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
  	// 改变根元素中变量的值，达到换肤效果
    skin(e) {
      if (e === 1) {
        document.body.style.setProperty("--bg", "#7F583F");
        document.body.style.setProperty("--color", "#123");
        document.body.style.setProperty("--fontSize", "12px");
        document.body.style.setProperty("--fill", "red");
      }
      if (e === 2) {
        document.body.style.setProperty("--bg", "#687");
        document.body.style.setProperty("--color", "#542");
        document.body.style.setProperty("--fontSize", "14px");
        document.body.style.setProperty("--fill", "#fff");
      }
      if (e === 3) {
        document.body.style.setProperty(
          "--bg",
          `url(${require("@/assets/logo.png")})`
        );
        document.body.style.setProperty("--color", "red");
        document.body.style.setProperty("--fontSize", "16px");
        document.body.style.setProperty("--fill", "#000");
      }
    }
  }
};
</script>

<style lang="less" scoped>
//根元素设置变量（css的语法）
:root {
  --bg: red;
  --color: #000;
  --fontSize: 16px;
  --fill: red;
}
//使用我们定义的变量
#test {
  background: var(--bg);
  height: 500px;
  width: 400px;
  font-size: var(--fontSize);
  color:var(--color);
  .users {
    fill: var(--fill);
    font-size: 100px;
  }
}
</style>
在这里插入代码片

参考：https://www.jianshu.com/p/6606f7aac412