Vue+element+sass实现动态换肤

本篇文章的使用场景就是在Vue+element+sass的项目中实现动态换肤的需求，先声明一下，这里所说的换肤，是事先定义好的主题样式，并非根据一个ColorPicker随意拾取的颜色进行实时换肤。我这里实现的方法比较笨，但也不失为着实可行的一套解决方案。因为实现我也在网上扒了好久，多数张冠李戴对不住需求，有的压根儿无法实现，还有的确实可以实现，但技术难度较高。各位若一时间没找到合适的实现方法，可以往下看看。

先说思路：要实现全项目的换肤，个人总结共分为三部分：

1.动态替换element-ui整体的主题样式。

2.要联动三方插件更换主题，如echarts等。本文不作阐述，因为每个插件换主题方式不同，咱们只需要在触发换肤时，去操作三方插件就好了。

3.联动更换自定义的样式颜色。这一条请参见前两天的一篇文章：《Vue+Sass实现动态换肤》

本文只讲第一条，如何实现替换element-ui整体样式。以下以切换主题light、dark为例。

一、准备两套css文件，light-theme.css和dark-theme.css，放到文件夹style下。（这两个文件最好自己压缩以下）

二、准备一个字符集文件（.woff），放到文件夹style/fonts下，这个文件很重要，没有或者与css版本不对应，将导致icon显示为乱码。

三、然后就在index.html文件上面预留出一个link标签，待换肤事件触发时，动态修改href的值。

<link rel="stylesheet" href="" id="theme_css">

export const toggleThemeHandle = _ => {
  let themeDom = window.document.getElementById('theme_css')
  let theme = window.localStorage.getItem('theme')
  if (theme === 'dark') {
    // 当前主题为dark时，切换为light
    window.localStorage.setItem('theme', 'light')
    themeDom.href = './static/style/light_theme.min.css'
  } else {
    // 当前主题为light或者不存在时，切换为dark
    window.localStorage.setItem('theme', 'dark')
    themeDom.href = './static/style/dark_theme.min.css'
  }
}

 

是不是无脑简单！！

要注意的是，因为这两个文件都是静态由link引入的，所以最好把style放到static文件夹下，这也是要压缩的原因。

上面操作很简单，相信做过两年开发的人都能想到，而本文这套实现的难点就在于去哪找一套elementUI相同版本的light-theme.css、dark-theme.css、element-ui.woff。官网没提供，网上也没有（我是没有找到）。。。资源包在此，自己下吧，至于从哪弄的，你细品...

主题资源包：

CSDN:    下载资源

百度网盘：https://pan.baidu.com/s/1Dyv_DB9zZMuTGQKg3oSlBA  提取码：o05h