引言

對(duì)于網(wǎng)頁換膚，例如最常見的深色、淺色風(fēng)格已經(jīng)是很常見的一個(gè)需求了。一直以來也有很多的實(shí)現(xiàn)方案，這里我主要介紹一下基于 CSS variable的實(shí)現(xiàn)方式

簡(jiǎn)單列舉下一些其它實(shí)現(xiàn)方式

1、把不同風(fēng)格樣式寫到不同的類名下面，通過切換類名來實(shí)現(xiàn)換膚

這種方式?jīng)]啥明顯的優(yōu)點(diǎn)，只是單純的實(shí)現(xiàn)了此需求。反而增加了css樣式文件代碼冗余且會(huì)造成大量重復(fù)代碼，樣式代碼不利于拓展維護(hù)，且開發(fā)效率低下

2、實(shí)現(xiàn)多套主題樣式文件，通過 link 標(biāo)簽動(dòng)態(tài)加載不同的樣式文件

這種方式的優(yōu)點(diǎn)大概是做到了按需加載吧，但同時(shí)也造成了需要拷貝大量重復(fù)代碼來單獨(dú)修改，也算是做到了樣式隔離，相比上一種方式稍稍提高了一點(diǎn)可維護(hù)性吧

在多個(gè)樣式文件切換的時(shí)候，可能會(huì)有加載延遲。這時(shí)候可以考慮使用 alternate 來解決

3、通過less或sass的變量方式實(shí)現(xiàn)

這種方式我們可以將所有風(fēng)格變量抽離出來，在樣式代碼中直接使用該變量，是一種比較推薦的方式。極大提高了代碼的拓展性和維護(hù)性

CSS variable的實(shí)現(xiàn)方式

如圖所示，目前主流瀏覽器都已經(jīng)支持css variable，我們盡管放心使用

CSS variable 允許我們?cè)?css 里面聲明變量，在變量前加上兩根小橫線即可（--）

body {
  --foo: #000;
  --bar: #fff;
}

需要注意的是css vars變量聲明，區(qū)分大小寫--foo 與 --Foo 是兩個(gè)不同的變量

var() 函數(shù)

使用var()函數(shù)來讀取變量

p{
    color:var(--foo)
}

var()函數(shù)支持第二個(gè)參數(shù)，用于表示變量的默認(rèn)值，如果變量值不存在，則以默認(rèn)值為準(zhǔn)

p{
    color:var(--fooo, #ccc)
}

關(guān)于var()函數(shù)此處不做過多贅述，詳情請(qǐng)查閱官方文檔

方案落地

大致思路：不管深色或是淺色風(fēng)格，我們都可以把它視作一個(gè)個(gè)主題。把每個(gè)主題的顏色值、盒子寬高、圖片地址等抽離為一個(gè)字典對(duì)象結(jié)構(gòu)。一個(gè)主題對(duì)應(yīng)一個(gè)配置文件，再通過切換配置文件來實(shí)現(xiàn)主題風(fēng)格的變化

一、和UI設(shè)計(jì)師溝通好各主題的色階

一個(gè)主題對(duì)應(yīng)一份配置文件，所以我們需要提前和UI設(shè)計(jì)師溝通好各主題對(duì)應(yīng)的色階，字號(hào)，一些通用樣式規(guī)則等

css vars變量名稱是不變的，變量值隨著主題的切換而發(fā)生改變

我的UI同事使用的是 figma，然后我發(fā)現(xiàn) figma 右側(cè)的信息欄里面有顏色編號(hào)，正好可以使用這個(gè)來當(dāng)做變量名稱。在編碼階段，看到這個(gè)編號(hào)，就知道用什么變量名了，非常方便。

如果你的UI同事使用的是別的設(shè)計(jì)工具，最好也是提前約定好變量名，使其大家都方便

二、將各主題色階抽離為一個(gè)字典對(duì)象

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設(shè)置style變量

這里我們需要用到 document.body.style 的api

// 設(shè)置變量
document.body.style.setProperty('--foo', '#666')
// 讀取變量
document.body.style.getPropertyValue('--foo')
// 刪除變量
document.body.style.removeProperty('--foo')

遍歷變量字典對(duì)象，根據(jù)不同主題，給網(wǎng)頁設(shè)置對(duì)應(yīng)變量

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)
  })
}

至此，我們已經(jīng)完成根據(jù)不同主題設(shè)置不同主題變量了，可以愉快的在樣式文件里面使用css vars

這種方式操作簡(jiǎn)單，且極大的提高了代碼的拓展性和維護(hù)性。之后再有別的主題，也不過是多增加一份配置文件而已，不會(huì)增加額外的副作用。

舉一反三

1、結(jié)合媒體查詢

通過結(jié)合媒體查詢，我們可以實(shí)現(xiàn)更復(fù)雜的交互場(chǎng)景

body {
  --foo: #fff
}
p {
    color: var(--foo)
}
@media screen and (min-width: 768px) {
  body {
    --foo: #000
  }
}

2、結(jié)合js業(yè)務(wù)邏輯

在一些特殊需求場(chǎng)景下，我們可以結(jié)合js業(yè)務(wù)邏輯，動(dòng)態(tài)追加或編輯 css vars

const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--foo', e.clientX);
});

3、存儲(chǔ)一些信息

既然是聲明變量，那么就有存儲(chǔ)信息的功能。我們可以試著將一些信息存儲(chǔ)在 css vars 里面，再通過document.body.style.getPropertyValue('--foo')去讀取使用。不過大部分場(chǎng)景應(yīng)該使用不到這種方法，也算是提供一種思路吧。

css vars是個(gè)潛力股，一起來挖掘它更多巧妙的用法吧

以上就是優(yōu)雅的實(shí)現(xiàn)網(wǎng)頁多主題風(fēng)格換膚功能詳解的詳細(xì)內(nèi)容，更多關(guān)于網(wǎng)頁多主題風(fēng)格換膚的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論