最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的。想着写一篇文章，来写一写实现过程中遇到的一些问题。
项目github地址
项目github地址
一 先看一下实现效果吧
设置主题颜色
讲道理这么一个功能，我觉得这么几点可以说下，分步实现：
1. 色值的选取
2. scss 的一些小众用法(多变量CSS值的批量设置)
3. 全局事件巴士的应用
1 色值的选取和原则
推荐大家看下蚂蚁金服的设计指引，里面对常见的交互和界面设计有一套不错的指引和建议，喜欢看书的也可以看看《写给大家看的设计书》。
对于界面中的色彩元素，我们一般要保持视觉的连续性，即同一套色彩，尽量采取同一个色环上的色值
同一个圆环上的色值作为一套颜色会显得更协调
所以这里采取ant design 的建议，取某一列色值作为我们的系列主题颜色（具体色值参照它的官网吧~）
而在某些特殊场合，需要表现出颜色的差异，如抛硬币页面的两个颜色，
2 将格式色值转换成十六进制颜色值
这里我们通过设置主题颜色的透明度来实现区分不同颜色， 然后我们是通过存储一个诸如 #123456 的16进制颜色全局变量作为我们主题，这里就需要我们把这样一个格式的色值转化成 rgba 表示的颜色值啦，代码如下，备用
hexToRgba (hex, opacity = 0.3) {
let color = []
let rgb = []
hex = hex.replace(/#/, '')
for (let i = 0; i < 3; i++) {
color[i] = '0x' + hex.substr(i * 2, 2)
rgb.push(parseInt(Number(color[i])))
}
return `rgba(${rgb.join(',')},${opacity})`
}
3 scss 的一些小众用法
我们最终拿到这么一串我们想要的主题颜色
复制代码 代码如下:
$colors: #f04134, #00a854, #108ee9, #f5317f, #f56a00, #7265e6, #ffbf00, #00a2ae, #2e3238;
一个很直接的思路，我们需要在各个view页面里面，去定义我们需要设置主题的元素的颜色，比如文字和icon的color, 以及头部的background 等。 于是我们在app 里面定义一个color变量，派发到各个view组件里面去，通过这个全局的变量来控制所有路由页面的颜色，以实现不同的主题效果。