vue 动态切换皮肤和主题 篇三

前面介绍了一种动态换肤的方法。主要是通过less-loader的less.modefyVar() 通过动态传参。动态修改less变量达到目的。

今天我们将采用另外一种存css的方式实现这种效果：

首先我们需要了解下css新的特征：

var()函数和:root伪类

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。

:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root 所在文件，都可以使用var()来引用

那我们动态换肤实现的思路是怎样呢？

首先 ，我们在main.js中引入一个全局的样式文件。在里面添加这样一行代码：

:root{--theme-bg-color:#f8f8f8;}

接下来我们在我们要修改颜色的地方执行这样一个函数：

const initThemeBgColor=(color)=>{

  const root = document.documentElement;

  root.style.setProperty('--theme-bg-color', color);

}

这样相当于在全局设置一个theme-bg-color的类。他的颜色根据传入的color进行设置

最后我们需要在我们需要更改主题颜色的页面结构里添加theme-bg-color这样一个class同时，我们要在<style scoped></style>里添加如下代码 .theme-bg-color{background-color: var(--theme-bg-color);}

这样只要传入的color值改变了。项目里所有添加了了 .theme-bg-color类的html结构都会变成传入的color

 

至此就可以实现根据动态的color值实现动态的改变主题色。

ps:这里会有一个问题：就是每次刷新以后。颜色就失效了。变成了默认颜色。原因就在于刷新以后内存数据丢失。为了解决这个问题。我们需要封装一个函数。同时先把颜色值保存一份到本地，刷新时先看theme-bg-color是否存在。如果不存在，就在再重新执行以下initThemeBgColor函数。本质上是给根节点再次设置 root.style.setProperty('--theme-bg-color', color);。以为每个页面都会存在刷新丢失问题。我们需要在顶层做一下这个判断。这里我们想到的思路是通过在main.js里做一次Minix混入。这样任何页面刷新都会执行这个函数。