最近在做的一個幾月vue的移動端小demo,其中有一塊是實現各個頁面的統一換膚功能的。想著寫一篇文章，來寫一寫實現過程中遇到的一些問題。
項目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 的一些小眾用法
我們最終拿到這么一串我們想要的主題顏色
一個很直接的思路，我們需要在各個view頁面里面，去定義我們需要設置主題的元素的顏色，比如文字和icon的color, 以及頭部的background 等。 于是我們在app 里面定義一個color變量，派發到各個view組件里面去，通過這個全局的變量來控制所有路由頁面的顏色，以實現不同的主題效果。
派發的實現在下一個部分說，這里我們先來完成我們的第一步，我們可以容易提取出我們的需求：
4 設置并保存一個全局顏色
界面的小事：
我在首頁直接實現這個功能，項目中我引入了mint-ui 框架（餓了么團隊的移動端框架，稍微遺憾使用感覺沒有element.ui 的舒服）， 設置的交互就用彈層 mt-popup 的形式好了，然后直接點擊色塊便設置對應顏色值