JavaScript CSS優雅實現網頁多主題風格換膚功能詳解

2023-02-05 14:02:28

引言

對於網頁換膚，例如最常見的深色、淺色風格已經是很常見的一個需求了。一直以來也有很多的實現方案，這裡我主要介紹一下基於 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是個潛力股，一起來挖掘它更多巧妙的用法吧

以上就是優雅的實現網頁多主題風格換膚功能詳解的詳細內容，更多關於網頁多主題風格換膚的資料請關注it145.com其它相關文章！