最近公司做的项目得到一个网站换肤的需求，也就是切换主题。那么如何切换主题色呢？切换主题色其实就是切换 CSS，然而在项目中不仅只有 CSS 需要换肤，图标和图片也需要跟随主题进行切换。于是，写一篇文章来记录下 Vue 中实现换肤的过程，先看下效果吧。
本文主要分三部分：CSS 切换，图标切换和图片切换。
CSS切换
关于 CSS 颜色的切换，我通过搜索，参考了ElementUI 的方案，总的来说分为四步
在 static 目录下新建一个 theme.css 文件，将需要替换的 CSS 声明在此文件中
background: #8981D8 !important;
}
声明所有可选的主题，每种颜色都对应于一个关键词，方便区分
通过 AJAX 获取 theme.css ，将颜色值替换为关键词。
function getStyleTemplate (data) {
const colorMap = {
'#B7A3FF': 'familyPrimary','#879FFF': 'familySecondary','#8981D8': 'sideBarTop'
}
Object.keys(colorMap).forEach(key => {
const value = colorMap[key]
data = data.replace(new RegExp(key,'ig'),value)
})
return data
}
把关键词再换回刚刚生成的相应的颜色值，并在页面上添加 style 标签
function writeNewStyle (originalStyle,colors) {
let oldEl = document.getElementById('temp-style')
let cssText = originalStyle
Object.keys(colors).forEach(key => {
cssText = cssText.replace(new RegExp(key,colors[key])
})
const style = document.createElement('style')
style.innerText = cssText
style.id = 'temp-style'
oldEl ? document.head.replaceChild(style,oldEl) : document.head.appendChild(style)
}
图标切换
由于项目刚开始做的时候并没有考虑到换肤的需求，于是所有图标都是采用 img 标签的方式引用的，
这样就导致无法给 icon 动态切换颜色了，所以，我决定改为 font 文件的方式来使用图标。这里推荐一个网站 icomoon ，这个网站可以轻松地将图片转换成 font 文件。图标也非常适合通过 font 的方式来使用，我们可以更加方便的修改图标的大小和颜色。
通过在线转换，我们将下载下来的 font 文件放入项目中，并新建一个 CSS 文件来声明所有图标。
/ use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: sub;
/ Better Font Rendering =========== /
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-edit:before {
content: "\e900";
}
之后就能通过 CSS 类名的方式来引用图标了。
为了使主题生效，我们也需要把图标的 CSS 写入 theme.css 文件中
图片切换
项目中还存在很多占位图或者其他图片会随着主题的变化而变化。通过引入所有图片，并用文件名来区分不同主题所对应的图片。在点击切换主题时，切换到主题所对应的文件，就能实现图片切换了。为此，我写了一个 mixin，并在组件中引入 mixin。
placeholderMixin
在点击切换主题时，会发射一个 changeTheme 事件，各组件接收到 changeTheme 事件，就会为图片重新赋值，也就达到了切换图片的效果。
