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-pickerv-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>

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

Vue + Less + Css变量实现热换肤功能相关推荐

vue移动助手实践（一）——基于vue的换肤功能
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的.想着写一篇文章,来写一写实现过程中遇到的一些问题. 项目在线demo 项目在线演示demo(切换到移动端调试模式哦 ...
VUE+ElementUI项目换肤功能
VUE+ElementUI项目换肤功能一.固定多套主题换肤设置页面 (views/layout.vue) themes.js (@/utils/themes) main.js css相关结构及内容 ...
vue的一键换肤功能
由于项目是已经写好了的,需要突然加一个一键换肤的功能,切换黑白两个皮肤,但是最好不要大量改动代码- 1.sass+vue 这种方法需要安装一个插件,webpack-theme-color-replac ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
[css] 如何实现换肤功能？
[css] 如何实现换肤功能? css 换肤常见方案是通过 less/sass/postcss 等css 预处理器,通过它们自身的变量用法,设置不同变量,生成不同的主题样式,但是这些样式都是会被打包 ...
vue 实现换肤功能
公司项目要实现vue项目换肤功能,要求一套深色,一套浅色,考虑到最节省时间的就是写两套css,一套light.css,一套dark.css,然后切换css 一.实现思路:切换选中的皮肤状态(light ...
Element UI主题换肤功能(基于vue-element-admin框架)
环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": & ...
使用ant-design-vue实现换肤功能
1.安装ant-design-vue npm i ant-design-vue --save 2.在main.js中引入 `import Antd from 'ant-design-vue'``imp ...
动态更换主题色（换肤功能）
文章目录对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...

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

Vue + Less + Css变量实现热换肤功能相关推荐

最新文章

热门文章