Vue + Less + Css变量实现热换肤功能

一、首先安装样式处理插件及less

yarn add style-resources-loader -D
yarn add vue-cli-plugin-style-resources-loader -D
yarn add less-loader --save
yarn add less --save

二、在src下新建theme文件夹，创建styleAll.less文件，styleAll.js文件，model.js文件

//   src/theme/styleAll.less 文件路径
// 默认的主题颜色
@primaryColor: var(--primaryColor, #000);
@primaryTextColor: var(--primaryTextColor, green);

// 导出变量
:export {
  name: "less";
  primaryColor: @primaryColor;
  primaryTextColor: @primaryTextColor;
}

//  src/theme/styleAll.js
import { themes } from "./model";
// 修改页面中的样式变量值
const changeStyle = (obj) => {
  for (let key in obj) {
    document
      .getElementsByTagName("body")[0]
      .style.setProperty(`--${key}`, obj[key]);
  }
};
// 改变主题的方法
export const setTheme = (themeName) => {
  localStorage.setItem("theme", themeName); // 保存主题到本地，下次进入使用该主题
  const themeConfig = themes[themeName];
  // 如果有主题名称，那么则采用我们定义的主题
  if (themeConfig) {
    localStorage.setItem("primaryColor", themeConfig.primaryColor); // 保存主题色到本地
    localStorage.setItem("primaryTextColor", themeConfig.primaryTextColor); // 保存文字颜色到本地
    changeStyle(themeConfig); // 改变样式
  } else {
    let themeConfig = {
      primaryColor: localStorage.getItem("primaryColor"),
      primaryTextColor: localStorage.getItem("primaryTextColor"),
    };
    changeStyle(themeConfig);
  }
};

// src/theme/model.js
// 一套默认主题以及一套暗黑主题
// 一套默认主题以及一套暗黑主题
export const themes = {
  default: {
    primaryColor: rgba(227,38,38,1),
    primaryTextColor: rgba(74,144,226,1),
  },
  dark: {
    primaryColor: rgba(0,0,0,1),
    primaryTextColor: rgba(0,0,0,1),
  },
};

三、之后在vue.config.js配置

const path = require("path");
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, "./src/theme/styleAll.less"),
      ],
    },
  },
};

四、自定义换肤方法

<template>
  <div class="hello">
   <el-button type="primary" size="mini" @click="moren"
        >默认主题</el-button
      >
      <el-button type="danger" size="mini" @click="hei">暗黑</el-button>
      <el-color-picker
        v-model="color"
        show-alpha
        @change="zidingyi"
      ></el-color-picker> 
  </div>
</template>


<script>
import { setTheme } from "@/theme/styleAll";
export default {
  name: "HelloWorld",
data(){
return{
color:
}
},
  mounted() {
    this.init(); // 初始化主题
  },
  methods: {
    init() {
      setTheme("default"); // 初始化未默认主题
    },
    // 更改为默认主题
    moren() {
      setTheme("default");
    },
    // 更改为暗黑主题
    hei() {
      setTheme("dark");
    },
    // 更改为自定义主题
    zidingyi() {
      let newPrimaryColor = this.color;
      localStorage.setItem("primaryColor", newPrimaryColor); // 将新的主题色存入本地
      localStorage.setItem("primaryTextColor", newPrimaryColor); // 将新的主题色存入本地
      setTheme();
    },
  },
};
</script>
<style scoped lang="less">
.hello {
background:@primaryColor;
    color: @primaryTextColor;
}
</style>

五、最后，重新启动项目，就可以实现自定义换肤了。