vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）

VUE项目动态切换皮肤/主题的通用实现方式

提供一种通用的的解决方案，无需重启项目，无需更改import的文件路径，直接通过功能按钮热更换皮肤/主题

vue-cli版本：3.0

1. 在pulic目录下创建skin目录，新建day.css和night.css两个主题样式文件，并在其中声明css变量

day.css

/*日间模式*/
:root {--bgColor: white;--fontColor: black;}

night.css

/*日间模式*/
:root {--bgColor: black;--fontColor: white;}

2. 找到index.html总入口文件，使用link标签引入css文件

在这里引入的样式即全局样式，所有子组件可以直接使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><!--皮肤--><link id="skin" rel="stylesheet" type="text/css" href="/skin/day.css"></head><body><div id="app"></div></body>
</html>

3. 为项目中的换肤按钮绑定换肤事件，传入不同的参数，从而动态改变link标签的href属性

// type为night或者day
changeSkin (type) {// 节流防止疯狂点击if (change) {clearTimeout(change)}let change = setTimeout(() => {document.head.querySelector('#skin').setAttribute('href', `/skin/${type}.css`)}, 100)
}

4. 在需要控制皮肤样式的组件中，直接使用night.css或者day.css中声明的全局变量即可

.content-xxxx {background-color: var(--bgColor);color: var(--fontColor);
}

注意：一般的换肤业务中，night.css与day.css中的变量名称与数量应该相同，具体的样式根据主题风格进行各自定义，

想要添加其他风格，新增xxx.css主题文件，然后在换肤按钮那里动态传参即可。

以上,即实现了皮肤/主题的动态切换。并且将各种样式抽离为独立的变量实现解耦。避免了使用class造成全局与局部class冲突的问题以及class中多个样式在不同主题间细微调整时的维护困难问题。

vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）相关推荐

最好用的Java热部署工具，无需重启项目秒级编译class代码
目录 1.部署插件 2.安装插件 3.激活使用 1.部署插件通过Jrebel插件实现,代码的实时更新,不需要重启项目就可以更新执行代码,Jrebel插件分为客户端和服务端,服务端为License验证 ...
idea下实现tomcat热部署（修改class等不重启项目）
在我们的日常开发过程中,常常会涉及到修改class等文件时,需要重启项目.这不仅耗时,而且还耽误我们的进度.实际上,我们用idea时,可以用tomcat实现热部署而无需重启项目.具体设置如下.此处我用 ...
vue实战-换皮肤2（使用less实现）
在上一节中我们通过动态切换html中css的引用路径实现了vue中的换皮肤功能.但是这种方法有一个缺陷,那就是只能用css的语法来实现.这个缺陷在某些变态的需求下会增加我们很多工作量,因此本节中将介绍 ...
玩转Qml(3)-换皮肤
简介效果预览必要的基础 QObject自定义属性全局单例实现皮肤的配置和原理皮肤选择器带三角形尖尖的弹窗组件简介本文是<玩转Qml>系列文章的第三篇,涛哥将教大家,如何在 ...
动态切换站点样式（换皮肤）
引言 Web站点的风格切换是很常见.也很受大家欢迎的功能,比如大家熟知的博客园就提供了几十款风格模板供大家选择.在Asp.Net中,我们可以通过模板页master page和主题theme来实现网站的 ...
android 换主题换皮肤（apk包方式）
更换皮肤(主题)的方式有很多种,首先要弄清楚换肤的定义,软件皮肤包括图标.字体.布局.交互风格等,换肤就是换掉皮肤包括的部分或者全部资源.皮肤一般含多个文件,有图片.配置等文件,分散的文件不利于传输和 ...
VUE动态切换皮肤 VUE动态切换背景图片操作 / VUE 主题切换
上正文使用:root ,var()函数实现 1. 创建皮肤或主题 css目录一个公共主题文件 theme.css,一个main.js引入文件theme-all.css,一个单独的主题样式文件 ...
Android UI换皮肤或白天黑夜模式
Android UI换皮肤或白天黑夜模式 UI换皮肤或白天黑夜模式,从产品上来看,是两种不同产品设计模式:白天黑夜模式只有两种模式:而换皮肤可以有多套,可以进行商业化,并盈利. > 白天夜间模 ...
Android 换皮肤
转载:http://blog.csdn.net/bboyfeiyu/article/details/48322023 最近本人需要用到夜间模式,但是经过一番搜索似乎并没有看到好的开源实现,看到有一个类 ...

vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）

VUE项目动态切换皮肤/主题的通用实现方式

vue项目动态换皮肤/换主题的通用实现方式（热换肤，无需重启项目，通俗易懂，看了就会！！！）相关推荐

最新文章

热门文章