點(diǎn)擊關(guān)注公眾號(hào)，“技術(shù)干貨” 及時(shí)達(dá)！

最近一年很多客戶(hù)要求更換主題色，而團(tuán)隊(duì)的項(xiàng)目基礎(chǔ)框架不一，因此幾乎使用了所有的更換主題的方案。以下總結(jié)了各方案的實(shí)現(xiàn)以及優(yōu)缺點(diǎn)，希望能幫助有需要更換主題色的伙伴少踩坑。

方案一：硬編碼

對(duì)一些老的前端基礎(chǔ)庫(kù)和業(yè)務(wù)庫(kù)樣式?jīng)]有提取公共樣式，當(dāng)有更換主題的需求，實(shí)現(xiàn)的方法只能是全局樣式替換，工作量比較大，需要更改form表單、按鈕、表格、tab、容器等所有組件的各種狀態(tài)，此外還需更換icon圖標(biāo)。

以下是我們的一個(gè)老項(xiàng)目實(shí)現(xiàn)主題色更換，全局樣式替換接近500行，如下圖所示：

「總結(jié)：」 對(duì)于這種老項(xiàng)目只能通過(guò)硬編碼的方式去更改，工作量較大，好在老項(xiàng)目依賴(lài)同一個(gè)基礎(chǔ)庫(kù)和業(yè)務(wù)庫(kù)，所以在一個(gè)項(xiàng)目上實(shí)現(xiàn)了也可以快速推廣到其它項(xiàng)目。

方案二：sass變量配置

團(tuán)隊(duì)的基礎(chǔ)組件庫(kù)Link-ui是基于Eelement-ui二次開(kāi)發(fā)，因此可以采取類(lèi)似于Element-ui的方式進(jìn)行主題更改，只需要設(shè)計(jì)師提供6個(gè)主題色即可完成主題色的更改，如下所示。

• 配置基礎(chǔ)色 基礎(chǔ)色一般需要設(shè)計(jì)師提供，也可以通過(guò)配置化的方式實(shí)現(xiàn)，

$--color-primary-bold: #1846D1 !default;
$--color-primary: #2664FD !default;
$--color-primary-light: #4D85FD !default;
$--color-primary-light-1: #9AC0FE !default;
$--color-primary-light-2: #C1DBFF !default;
$--color-primary-lighter: #E8F2FF !default;

• 從基礎(chǔ)庫(kù)安裝包引入基礎(chǔ)色和庫(kù)的樣式源文件

@import "./common/base_var.scss";

/* 改變 icon 字體路徑變量，必需 */
$--font-path: '~link-ui-web/lib/theme-chalk/fonts';

@import "~link-ui-web/packages/theme-chalk/src/index";

• 全局引入

import '@/styles/link-variables.scss';

• 更換主題色 只需要更改上面的6個(gè)變量即可實(shí)現(xiàn)主題色的更改，比如想改成紅色,代碼如下

$--color-primary-bold: #D11824 !default;
$--color-primary: #FD268E !default;
$--color-primary-light: #D44DFD !default;
// $--color-primary-light-1: #9AC0FE !default;
$--color-primary-light-2: #DCC1FF !default;
$--color-primary-lighter: #F1E8FF !default;

「總結(jié)：」 對(duì)于基礎(chǔ)庫(kù)和樣式架構(gòu)設(shè)計(jì)合理的項(xiàng)目更改主題色非常的簡(jiǎn)單，只要在配置文件更換變量的值即可。它的缺點(diǎn)是sass變量的更改每次都需要編譯，很難實(shí)現(xiàn)配置化。

方案三、css變量+sass變量+data-theme

代碼結(jié)構(gòu)如下：

• 設(shè)計(jì)三套主題分別定義不同的變量（包含顏色、圖標(biāo)和圖片）

  // theme-default.scss
  /* 默認(rèn)主題色-合作藍(lán)色 */
[data-theme=default] {
  --color-primary: #516BD9;
  --color-primary-bold: #3347B6;

  --color-primary-light: #6C85E1;
  --color-primary-light-1: #C7D6F7;
  --color-primary-light-2: #c2d6ff;
  --color-primary-lighter: #EFF4FE;

  --main-background: linear-gradient(90deg,#4e68d7, #768ff3);

  --user-info-content-background-image: url();
  --msg-tip-content-background-image: url();
  ...
  }

  // theme-orange.scss
  // 陽(yáng)光黃
[data-theme=orange] {
  --color-primary: #FF7335;
  --color-primary-bold: #fe9d2e;

  --color-primary-light: #FECB5D;
  --color-primary-light-1: #FFDE8B;
  --color-primary-light-2: #fcdaba;
  --color-primary-lighter: #FFF3E8;

  --main-background: linear-gradient(90deg,#ff7335 2%, #ffa148 100%);


  --user-info-content-background-image: url();
  --msg-tip-content-background-image: url();
  ...
  }

  // theme-red.scss
 /* 財(cái)富紅 */
[data-theme=red] {
  --color-primary: #DF291E;
  --color-primary-bold: #F84323;

  --color-primary-light: #FB8E71;
  --color-primary-light-1: #FCB198;
  --color-primary-light-2: #ffd1d1;
  --color-primary-lighter: #FFEEEE;


  --main-background: linear-gradient(90deg,#df291e 2%, #ff614c 100%);

  --user-info-content-background-image: url();
  --msg-tip-content-background-image: url();
  ...
  }

• 把主題色的變量作為基礎(chǔ)庫(kù)的變量

$--color-primary-bold: var(--color-primary-bold) !default;
$--color-primary: var(--color-primary) !default;
$--color-primary-light: var(--color-primary-light) !default;
$--color-primary-light-1: var(--color-primary-light-1) !default;
$--color-primary-light-2: var(--color-primary-light-2) !default;
$--color-primary-lighter: var(--color-primary-lighter) !default;

• App.vue指定默認(rèn)主題色

window.document.documentElement.setAttribute('data-theme', 'default')

data-theme會(huì)注入到全局的變量上，所以我們可以在任何地方獲取定義的css變量

實(shí)現(xiàn)效果如下：

「總結(jié)：」 該方案是最完美的方案，但是需對(duì)顏色、背景圖、icon等做配置，需設(shè)計(jì)師設(shè)計(jì)多套方案，工作量相對(duì)較大，適合要求較高的項(xiàng)目或者標(biāo)準(zhǔn)產(chǎn)品上面，目前我們的標(biāo)準(zhǔn)產(chǎn)品選擇的是該方案。

方案四：濾鏡filter

「filter」 CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。

它有個(gè)屬性hue-rotate() 用于改變圖整體色調(diào)，設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg展示原圖，大于360deg相當(dāng)于又繞一圈。用法如下：

body {
    filter: hue-rotate(45deg);
}

「總結(jié)：」 成本幾乎為0，實(shí)現(xiàn)簡(jiǎn)單。缺點(diǎn)是對(duì)于某些圖片或者不想改的顏色需要特殊處理。

方案五：特殊時(shí)期變灰

• filter還有個(gè)屬性 grayscale() 改變圖像灰度，值在 0% 到 100% 之間，值為0%展示原圖，值為100% 則完全轉(zhuǎn)為灰度圖像。

body {
    filter: grayscale(1);
}

「總結(jié)：」 成本小，可以將該功能做成配置項(xiàng)，比如配置它的生效開(kāi)始時(shí)間和生效結(jié)束時(shí)間，便于運(yùn)營(yíng)維護(hù)也不用頻繁發(fā)布代碼。

總結(jié)

以上就是實(shí)現(xiàn)換膚的全部方案，我們團(tuán)隊(duì)在實(shí)際項(xiàng)目都有使用，比較好推薦的方案是方案一、方案三、方案五，對(duì)于要求不高的切換主題推薦方案四，它的技術(shù)零成本，對(duì)于標(biāo)準(zhǔn)產(chǎn)品推薦方案三。如有更好的方案歡迎評(píng)論區(qū)交流。

點(diǎn)擊關(guān)注公眾號(hào)，“技術(shù)干貨” 及時(shí)達(dá)！