對于網頁換膚，例如最常見的深色、淺色風格已經是很常見的一個需求了。一直以來也有很多的實現方案，這里我主要介紹一下基于 css variable的實現方式
簡單列舉下一些其它實現方式
1、把不同風格樣式寫到不同的類名下面，通過切換類名來實現換膚
這種方式沒啥明顯的優點，只是單純的實現了此需求。反而增加了css樣式文件代碼冗余且會造成大量重復代碼，樣式代碼不利于拓展維護，且開發效率低下
2、實現多套主題樣式文件，通過 link 標簽動態加載不同的樣式文件
這種方式的優點大概是做到了按需加載吧，但同時也造成了需要拷貝大量重復代碼來單獨修改，也算是做到了樣式隔離，相比上一種方式稍稍提高了一點可維護性吧
在多個樣式文件切換的時候，可能會有加載延遲。這時候可以考慮使用 alternate 來解決
3、通過less或sass的變量方式實現
這種方式我們可以將所有風格變量抽離出來，在樣式代碼中直接使用該變量，是一種比較推薦的方式。極大提高了代碼的拓展性和維護性
CSS variable的實現方式
如圖所示，目前主流瀏覽器都已經支持css variable，我們盡管放心使用
CSS variable 允許我們在 css 里面聲明變量，在變量前加上兩根小橫線即可（--）
body {
--foo: #000;
--bar: #fff;
}需要注意的是css vars變量聲明，區分大小寫--foo 與 --Foo 是兩個不同的變量
var() 函數
使用var()函數來讀取變量
p{
color:var(--foo)
}var()函數支持第二個參數，用于表示變量的默認值，如果變量值不存在，則以默認值為準
p{
color:var(--fooo, #ccc)
}關于var()函數此處不做過多贅述，詳情請查閱官方文檔
方案落地
大致思路：不管深色或是淺色風格，我們都可以把它視作一個個主題。把每個主題的顏色值、盒子寬高、圖片地址等抽離為一個字典對象結構。一個主題對應一個配置文件，再通過切換配置文件來實現主題風格的變化
一、和UI設計師溝通好各主題的色階
一個主題對應一份配置文件，所以我們需要提前和UI設計師溝通好各主題對應的色階，字號，一些通用樣式規則等
css vars變量名稱是不變的，變量值隨著主題的切換而發生改變
我的UI同事使用的是 figma，然后我發現 figma 右側的信息欄里面有顏色編號，正好可以使用這個來當做變量名稱。在編碼階段，看到這個編號，就知道用什么變量名了，非常方便。
如果你的UI同事使用的是別的設計工具，最好也是提前約定好變量名，使其大家都方便
二、將各主題色階抽離為一個字典對象
dark.js
export default {
'--grey900': '#EBEEF5',
'--grey600': '#A7ABC0',
'--grey500': '#72768D',
'--grey400': '#5D6177',
'--grey300': '#404759',
'--grey200': '#2C323E',
'--grey100': '#282B32',
'--grey50': '#171B22',
'--grey0': '#222730',
} white.js
export default {
'--grey900': '#1F2429',
'--grey600': '#646C73',
'--grey500': '#8D9399',
'--grey400': '#C3C7CB',
'--grey300': '#E4E6E7',
'--grey200': '#EFF0F1',
'--grey100': '#F4F5F6',
'--grey50': '#F8F9FA',
'--grey0': '#FFFFFF',
} 三、通過js設置style變量
這里我們需要用到 document.body.style 的api
// 設置變量
document.body.style.setProperty('--foo', '#666')
// 讀取變量
document.body.style.getPropertyValue('--foo')
// 刪除變量
document.body.style.removeProperty('--foo')遍歷變量字典對象，根據不同主題，給網頁設置對應變量
import C from '@/utils/cssVarMap'
setCssVar (flag) {
const varList = Object.entries(flag ? C.white : C.dark)
varList.forEach(([key, val]) => {
document.body.style.setProperty(key, val)
})
}至此，我們已經完成根據不同主題設置不同主題變量了，可以愉快的在樣式文件里面使用css vars
這種方式操作簡單，且極大的提高了代碼的拓展性和維護性。之后再有別的主題，也不過是多增加一份配置文件而已，不會增加額外的副作用。
舉一反三
1、結合媒體查詢
通過結合媒體查詢，我們可以實現更復雜的交互場景
body {
--foo: #fff
}
p {
color: var(--foo)
}
@media screen and (min-width: 768px) {
body {
--foo: #000
}
}2、結合js業務邏輯
在一些特殊需求場景下，我們可以結合js業務邏輯，動態追加或編輯 css vars
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--foo', e.clientX);
});3、存儲一些信息
既然是聲明變量，那么就有存儲信息的功能。我們可以試著將一些信息存儲在 css vars 里面，再通過
document.body.style.getPropertyValue('--foo')去讀取使用。不過大部分場景應該使用不到這種方法，也算是提供一種思路吧。
css vars是個潛力股，一起來挖掘它更多巧妙的用法吧
