態調整web系統主題? 看這一篇就夠了

一種構建靈活的系統頁面主題方案

前置技術點

閱讀此篇文章前，最好有下列知識

1. css 基礎知識

2. dart-sass 預處理器編程

3. webpack 以及 postcss

4. tailwindcss 含有 jit 的 v2/v3

前言

我們在日常生活中，不論是訪問網站，手機App，還是小程序，時常會用到 切換主題 這個功能。它能夠為用戶提供一定的自定義顯示界面的能力，同時手機系統級別的主題也能夠更換，比如 light(明亮模式) 和 dark(黑暗模式)。

那么如何讓我們編寫的應用，在改動不大的情況下，能夠快速的適配多個主題呢？

這就需要設計一個方案了。

方案設計

方案參考

這里我們以程序員們最熟悉的 Github 為例，它的主題切換是這樣做的:

它在 根元素 那預設了幾套 css 變量值, 然后通過 js 去動態修改 html 根元素上的 data-color-mode 和 data-dark-theme 這些屬性的值，從而讓不同的 css 選擇器選中這個根元素，并以此來動態的切換 :root 中的 css 變量的值。

同時這些變量都被廣泛的使用在各種的 原子化的 class 和 @apply 中，一旦變量一換，所有使用到這些class的控件和布局都收到影響，自然整個主題就改變了。

1. 提煉css變量

首先我們第一步要做的就是提煉css變量，這些主要由設計師提供。

這里以顏色為例，主要包含 同個顏色的多態，控件各個狀態的顏色，提示警告錯誤，字體中，標題，副標題，正文，提示的顏色 等等。當然像字體大小，陰影這類也是同樣的。

這方面就不細說了，在提取到變量之后我們就可以開始進行命名工作:

// constants.scss // 這是一個 scss 的 map數據結構，保存默認的初始值 $root-vars:(   --color-fg-default: #adbac7,   --color-fg-muted: #768390,   --color-fg-subtle: #545d68,   --color-fg-on-emphasis: #cdd9e5,   --color-scale-gray-0: #cdd9e5,   --color-scale-gray-1: #adbac7,   --color-scale-gray-2: #909dab,   --color-scale-gray-3: #768390,   // ... )

可以注意到，在維護的變量中，顏色占了絕大部分，而且我們保存的都是顏色的hex格式，并沒有按照rgba的格式，把透明度(opacity)保存下來， 這是為什么? 答案會在后面揭曉。

接著，維護完這個sass:map ，我們編寫一個工具類 util.scss 來把顏色變量轉化為字符串:

// util.scss @use 'sass:color'; @use 'sass:meta'; @function getRgbString($color) {   @if (meta.type-of($color) == color) {     @return color.red($color) color.green($color) color.blue($color);   } @else {     @return $color;   } }

然后在全局樣式 global.scss 中添加:

// global.scss @use './constants.scss' as C; @use './util.scss' as Util; :root {   @each $var, $color in C.$root-vars {     #{$var}: Util.getRgbaString($color);   } }

這樣我們的那些變量默認值字符串就添加進了 :root 根元素中:

/* result */ :root{   --color-canvas-default-transparent: 34 39 46;   --color-marketing-icon-primary: 108 182 255;   --color-marketing-icon-secondary: 49 109 202;   --color-diff-blob-addition-num-text: 173 186 199;   --color-diff-blob-addition-fg: 173 186 199;   --color-diff-blob-addition-num-bg: 87 171 90;   --color-diff-blob-addition-line-bg: 70 149 74;   --color-diff-blob-addition-word-bg: 70 149 74;   --color-diff-blob-deletion-num-text: 173 186 199;   ... }

這里注意全局變量中存儲的是字符串，并不是顏色變量本身。

但是有了這些，沒有對應的 class 和 scss 變量，我們還是很不好使用這些變量的，那么怎么進行工程化來提升我們的開發效率呢？接下來重點來了。

2. scss 與 js通信，動態生成 scss 變量與原子化 class

首先編寫 export.scss 用于暴露對象給 js 使用:

// export.scss @use './constants.scss' as C; @use './util.scss' as Util; :export {   @each $var, $color in C.$root-vars {     #{$var}: Util.getRgbaString($color);   } }

然后利用 webpack sass-loader 中 js 和 scss 的通信方法，就可以生成:

• variables.scss (全局scss變量文件)

• extendColors.cjs (tailwindcss colors 配置文件)

// generator.js 生成器 import variables from '@/assets/scss/export.scss' // 簡易的去除前綴 removeColorPrefix(str) {   return str.substring(8) } // 此時的 variables 是一個 object // 那么scss全局變量的模板生成為: scssFilterShadow(str) {   return `rgb(var(${str}))` } // scss模板為 ${{ removeColorPrefix(k) }}:{{ scssFilterShadow(k) }}; // 此時 原子化的 `tailwindcss colors` 文件生成為: jsFilterShadow(str) {   return `withOpacityValue('${str}')` } // tailwindcss模板為 '{{ removeColorPrefix(k) }}':{{ jsFilterShadow(k) }},

通過這種方式，我們把生成的結果寫入 variables.scss 和 extendColors.cjs 文件內，從而便捷把第一步中維護的如此之多的 css變量，全部快速方便的轉化為同等的 scss變量 和 tailwindcss 配置

3. 全局scss文件變量注入

生成 variables.scss后，我們可以配置一下 sass-loader 來讓其中的變量無需顯式引入，即可在全局生效:

// sass-loader {   additionalData: '@use "@/assets/scss/variables.scss"  *;', }

這樣我們就可以在任意的 vue <style>, 或者 .scss 文件內使用到所有 variables.scss 中聲明的變量了。

4. 原子化的 class 生成

生成 extendColors.cjs 后，我們在里面添加:

function withOpacityValue(variable) {   return ({ opacityValue }) => {     if (opacityValue === undefined) {       return `rgb(var(${variable}))`     }     return `rgb(var(${variable}) / ${opacityValue})`   } }

這是為了結合 jit引擎，來動態的調整所有顏色的透明度。有了它,我們就能編寫出以下的代碼:

h1{   @apply text-header-text;    // 等價于   // color: rgb(var(--color-header-text)) } h2{   @apply text-header-text/70;   // 等價于   // color: rgb(var(--color-header-text) / 0.7) }

這也是我們要給根元素中的 css變量 賦值為 R G B 格式的原因了！

本質上講，是我們在利用原生 css 中 rgb(rgba是rgb的別名) 構造方法來創建顏色變量:

/* rgb的函數Syntax */ rgb(255,255,255) /* white */ rgb(255,255,255,.5) /* white with 50% opacity */ rgb(255 255 255) /* CSS Colors 4 space-separated values */ rgb(255 255 255 / .5); /* white with 50% opacity, using CSS Colors 4 space-separated values */

從上面這段代碼片段中，我們可以看到，列出的 rgb(R G B / A)就是現在使用的方案。

當然我們也可以更改上述的 getRgbString 和 withOpacityValue 這2個方法，把 , 這個分隔符加入進去，再把 / 去除，從而使用它 rgb(R,G,B,A) 這個構造方式。

這樣我們在使用時就可以生成出這樣的樣式:

.neutral{   background-color: rgb(var(--color-neutral-muted));   &:hover{     background-color: rgb(var(--color-neutral-muted) / 0.4);   } }

是不是非常的靈活？

接下來只要把 extendColors.cjs 導入進 tailwind.config.js 配置中，就可以自動生成 class 和 vscode 的智能提示了:

// tailwind.config.js const extendColors = require('./client/theme/extendColors.cjs') const colors = require('tailwindcss/colors') module.exports = {   // ...   theme:{     extend:{       colors:{         ...extendColors.colors,       }       //...     },     colors:{       transparent: 'transparent',       current: 'currentColor',       black: colors.black,       white: colors.white,       gray: colors.gray,     },     // ...   }   // ...  }

這樣，我們只需要把主題變更依賴的變量們，寫進各種控件，layout，容器中去，所有的 css 變量就生效了，切換主題就非常的方便。

5. 動態修改根節點變量

很多場景下我們的應用主題，不是從前端維護的幾套預設方案中進行選擇，而是由用戶自定義配置，保存在數據庫中，每次請求后端才能獲取到。

這種獲取方式意味著前端這里，只保留一套默認的預設方案。所以我們通常會在獲取到后端給的主題數據后，動態的修改 css變量 的值。

具體怎么做呢？本質上就是調用 CSSStyleDeclaration.setProperty()，來設置 document.documentElement 的變量值。

為了讓它更好用，我們可以進行封裝，并建立一套瀏覽器本地的緩存機制，這些在此不再敘述，條條大道通羅馬。

兼容性

注意此方案是放棄 IE 的! (都上 tailwindcss 了)，其余瀏覽器兼容良好。

總結

這種方式，實際上利用了很多的 css, sass, webpack,tailwindcss 的特性，筆者回過頭來看，發現這個方案在實現后，好用是非常好用的。

變量，原子化class, 公共提取和智能提示一應俱全，就是要對上面一些技術點有比較充分的理解。

如果您對此篇文章有建議或者更好的方案，也歡迎聯系筆者一起探討。

筆者的聯系方式

附錄

源碼