一、前言
UI 元件庫是現代 Web 應用程式開發中不可或缺的一部分。動态主題風格切換是一個非常重要的功能，它可以允許應用程式使用者在不同的場景下選擇自己喜歡的主題。這樣的一個特性可以增加使用者體驗的個性化，并提高應用程式的可用性和易用性。
微盟移動端元件庫 Titian 提供了動态主題切換的能力，并且延展了主題範圍。
二、背景
在以前商戶店鋪的品牌視覺風格往往千篇一律，同時還因為需要逐個繁瑣地配置界面中元素，導緻的風格錯亂等問題。針對上述的痛點，本次更新在確定商戶品牌風格統一的前提下，基于品牌調性提煉了具有共性的視覺特征，分别為顔色、圖示、圓角。并用這些特征組合為“通用”、“潮流”、“可愛”三套風格，能夠讓商家随心選擇，讓線上店鋪更貼合自身的品牌調性，提高品牌識别度，維持 C 端使用者的品牌心智。
微盟移動端元件庫 Titian 的主題風格包括三個次元的風格變化：
1、主題顔色的風格切換，這裡主題色可以設定任意一種色值。
2、字型圖示風格的切換，元件庫中的所有圖示包含三種風格，具體分為通用型，超流型和可愛型。
3、所有元件的圓角的切換，元件庫中所有圓角也分為三種風格，風格的分類和字型圖示分類一緻，通用型的圓角即為設計稿上的圓角，超流型的圓角則是所有的元件圓角都變成直角，可愛型的圓角則為在設計稿上的圓角的基礎上加上8個像素。
我們要實作三種風格的切換是互相獨立的，可以互相組合搭配。另外，圖示風格的切換可以是全量一起切換，也可以是部分單獨切換，而且需要運作時可以動态切換。
這些風格的切換都需要内置到元件庫中，隻需要給業務方提供一個變量來改變整體風格。
三、需求分析
對于主題色的風格配置，由于有些元件使用的的具有百分比透明度的主題色，是以采用 RGBA 色值更加友善。對于圖示風格切換，從一種風格增加到三種風格，能不能盡量的不要增加代碼體積，畢竟小程式對包體積有嚴格的要求。 對于圓角風格，有些需要将設計稿的圓角加8像素，有些需要變成直角，而有些又需要單獨處理成大圓角。
這都該如何設計呢？這麼多的風格切換，如何能盡量設計少的接口來讓業務方寫最少的代碼，不去增加業務方的記憶負擔呢？另外需要在運作時進行風格的切換，我決定使用 CSS 原生變量的方式。
CSS變量的好處包括：
代碼重用：可以在多個元素中使用同一個變量，避免了重複編寫樣式代碼的問題。
簡化維護：當需要修改樣式時，隻需要修改變量的值，而不是每個元素的樣式。
動态更新：CSS 變量可以通過 JavaScript 動态修改，使得樣式在運作時可以動态變化。
提高可讀性：通過使用有意義的變量名，可以使樣式表更易于了解和維護。
CSS 變量可以提高代碼的可維護性、可讀性和靈活性。
四、技術方案和實施
4.1 主題顔色切換方案
元件庫内部定義三個 CSS 變量：--theme-r、--theme-g、--theme-b，這三個 CSS 變量也是對外暴露出去修改主題顔色的關鍵。元件内部的全局 less 檔案使用這三個變量定義主題色，所有元件使用到主題色的地方都統一使用下面的 less 變量。
@theme-r: var(--theme-r, 250);
@theme-g: var(--theme-g, 44);
@theme-b: var(--theme-b, 25);
@brand-color: rgb(@theme-r, @theme-g, @theme-b);
@brand-color-fade-10: rgba(@theme-r, @theme-g, @theme-b, 0.1);
@brand-color-fade-20: rgba(@theme-r, @theme-g, @theme-b, 0.2);
@brand-color-fade-30: rgba(@theme-r, @theme-g, @theme-b, 0.3);
@brand-color-fade-40: rgba(@theme-r, @theme-g, @theme-b, 0.4);
@brand-color-fade-50: rgba(@theme-r, @theme-g, @theme-b, 0.5);
@brand-color-fade-60: rgba(@theme-r, @theme-g, @theme-b, 0.6);
@brand-color-fade-70: rgba(@theme-r, @theme-g, @theme-b, 0.7);
@brand-color-fade-80: rgba(@theme-r, @theme-g, @theme-b, 0.8);
@brand-color-fade-90: rgba(@theme-r, @theme-g, @theme-b, 0.9);
@brand-color-fade-100: rgba(@theme-r, @theme-g, @theme-b, 1); 4.2 圓角風格切換方案
三種圓角是對應三種圓角數值，預設的圓角是設計稿的圓角，怎樣變成直角和大8像素的圓角呢？我采用設計圓角加上增量圓角來達到最終圓角的目的。
針對于所有增量圓角，我們定義一個css變量：--base-radius-size，另外在全局less變量中定義圓角變量，我們所有使用到圓角的地方都使用less變量；預設的增量為0。
潮流型風格需要将圓角變成直角，那麼隻需将增量圓角設定為一個較大負值比如-999px，那麼最終也會得到一個負數圓角，因為圓角不存在負值，是以負值圓角表現就是圓角為0的直角效果。
可愛型風格需要将設計稿圓角增加8像素。那麼這個增量圓角就設定為8px；而對于那些特殊需求，要單獨設定成大圓角即半圓形的圓角，那麼隻需給一個較大的圓角即可。但是為了做區分，是以這裡新增了一個css變量：--capsule-radius-size，這個是專供特殊需求圓角使用，比如button和search的圓角，他們在可愛風格下會直接變成膠囊型圓角。那麼這裡就把--capsule-radius-size設定為999px即可。
下圖就是全局 less 變量中定義的圓角，在元件中統一使用如下圓角。目前隻羅列了4px、8px、12px、16px和大圓角。如果有更多圓角，可以新增多個圓角數值。業務方在使用時，設定通用風格，隻需設定--base-radius-size:0px;--capsule-radius-size:0px;這也是預設風格。設定成潮流型，隻需設定--base-radius-size:-999px;--capsule-radius-size:-999px;設定成可愛型，隻需設定--base-radius-size:8px;--capsule-radius-size:999px;
@radius-4: calc(var(--base-radius-size, 0px) + 4px);
@radius-8: calc(var(--base-radius-size, 0px) + 8px);
@radius-12: calc(var(--base-radius-size, 0px) + 12px);
@radius-16: calc(var(--base-radius-size, 0px) + 16px);
@radius-999: calc(var(--base-radius-size, 0px) + 999px);
// 圓角 （按鈕button、搜尋search）采用如下圓角；
// 可以自适應變成膠囊型
@special-radius-4: calc(var(--capsule-radius-size, 0px) + 4px);
@special-radius-8: calc(var(--capsule-radius-size, 0px) + 8px);
@special-radius-12: calc(var(,--capsule-radius-size 0px) + 12px);
@special-radius-16: calc(var(--capsule-radius-size, 0px) + 16px);
@special-radius-999: calc(var(--capsule-radius-size, 0px) + 999px); 到這裡切換圓角的功能已經實作了，但是讓業務方去記憶不同的圓角值對應三種風格，比如設定可愛風需要設定--base-radius-size:8px;--capsule-radius-size:999px;
這會增加業務方的記憶負擔，能不能繼續優化，讓設定更簡單易用呢？我又探索了在 CSS 中使用布爾運算，讓業務方通過傳入0、1、2，元件内自動計算出需要使用的圓角值。
利用calc + var實作純css布爾運算
三種風格的計算邏輯
邏輯延展，适應更多風格
這樣的方式就大大簡化了業務的使用負擔，隻需要根據接口傳回的風格類型，将對應的0、1、2通過 CSS 變量傳入元件庫，就可使用不同的圓角風格，計算過程完全在元件内部。後續如果要調整規則，也隻需要在元件中進行全局的修改即可。
4.3 圖示風格切換方案
目前常見的圖示風格切換方式，主要是圖示名稱的切換。假如原有 50 個通用型風格的圖示，現在分别新增 50 個潮流型和可愛型圖示，對應不同的圖示名稱，換圖示名就達到了換風格的目的。我的方案簡單概括就是換字型，不換圖示名稱；由于小程式中對包體積有嚴格控制，是以能不增加包體積則最好；
在字型圖示平台建立三套字型圖示庫，分别為通用型，潮流型和可愛型字型庫；并分别上傳對應風格的圖示；按照通用型圖示庫為基準，修改新增字型庫裡的圖示名稱和 Unicode 編碼，做到三套字型庫中圖示名稱和 Unicode 編碼一一對應相同；如下圖，同一個删除圖示，在三種風格的字型庫中，下圖示記的地方代表 Unicode 編碼和圖示名稱，在三個字型庫中要設定成一樣的。将三套字型圖示引入到小程式項目中，由于圖示名稱和 Unicode 編碼一緻，是以隻需要引入三套字型的定義内容，具體的圖示僞元素定義内容基本一緻，無需新增。
上圖是設定的關鍵，每個圖示庫中需對應設定成一樣的值。
五、總結
主題色可以設定任意一種色值，圖示可以三種風格互相切換，圓角也可以三種風格互相切換。這三中風格又可以互相搭配。微盟移動端元件庫 Titian 采用 CSS 變量方式切換風格，其中主題色風格提供三個 CSS 變量：--theme-r、--theme-g、--theme-b 對應主題色的 RGBA 色值，字型圖示提供一個 CSS 變量，--icon-family 來設定圖示對應的字型庫的名稱，圓角風格提供兩個 CSS 變量：--base-radius-size 和 --capsule-radius-size 來設定圓角的增量，後續又優化為使用 --s 來計算得到增量圓角。
通過以上幾個簡單的 CSS 變量，微盟移動端元件庫 Titian 實作了，使用純 CSS 方式，在運作時動态切換主題風格和自由搭配三種類型風格的能力，在小程式和 H5 中是完全通用的，體驗完全一緻。微盟移動端元件庫 Titian 動态切換主題的能力，給使用方豐富的選擇性，展現品牌調性的多樣化。也兼顧了商家品牌個性化需求的靈活性，圓角與圖示風格可以進行脫鈎單獨選擇風格，一鍵配置，全店生效。以及在已定義的部分場景中也能與全局風格脫鈎 (例如價格色與标簽色)，既有統一的品牌風格，又不失場景化的靈活表達。貼合使用者心智，維持品牌認知。在賦能品牌的同時，開發者能夠探索出無限可能。
目前微盟移動端元件庫 Titian 已經完全開源，期待大家共同建構元件庫生态，讓Titian元件庫更加易用好用。
六、參考文獻
1、微盟移動端元件庫 Titian官網：https://titian.design.weimob.com
2、微盟移動端元件庫Titian的github倉庫：https://github.com/weimob-tech/titian-design
3、css-variables：https://www.kizu.ru/conditions-for-css-variables/#fallbacks
作者:張陽
來源:微信公衆号:微盟技術中心
出處:https://mp.weixin.qq.com/s/0uTGbohgxiEFNK8KSKorAg