一、首先安装样式处理插件及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>
五、最后,重新启动项目,就可以实现自定义换肤了。