HeyUI元件庫 | 如何實現線上切換主題

vvpvvp發表於2019-03-03
UI元件

目前支援線上切換主題的元件庫

如果有更多的，請在下方留言，我會後期補充。

ant-design

目前ant-design支援的切換主題顏色是在頁面最下方。

是的，如果你不仔細，你是不知道系統有這個功能的。

然後這裡要吐槽一個點，隨便切換什麼顏色都很卡，因為沒有確認按鈕，所以隨便調一個小顏色，也會去後端請求，值得改進....

ant-design使用的less，和HeyUI是一致的，並且也提供全域性less變數定義功能，和Hey-Cli的globalVars也是差不多的功能。

antd的線上切換其實是前端線上編譯的，所以速度比較卡頓，再加上顏色元件的設計，所以顯得更加卡了。

HeyUI元件庫 | 如何實現線上切換主題

Element

其實餓了麼的切換主題色的功能是很明顯的，就在主頁上方位置。

切換顏色的互動我要狠狠的誇讚一番，有確認按鈕，切換順暢，一比較立竿見影。

然後餓了麼使用的是scss，其實都差不多的，因為主要功能大致都是差不多的。

HeyUI元件庫 | 如何實現線上切換主題

HeyUI

HeyUI元件庫是在11月剛剛把切換主題的功能上線的。

當然，系統中配置主題，我們一直是支援的，只是一直沒有嘗試實現官網切換主題的功能。

基於官網上次的改版，有人建議把下面四個顏色塊當做切換主題色的入口，我覺得挺好，於是抽空來實現了一下。

戳我去官網試試

HeyUI元件庫 | 如何實現線上切換主題

實現方案

首先，ant-design和element是需要後端服務的，考慮到我想要的效果，我覺得改成固定4個主題方案，這樣就可以免了後端的服務。

關於HeyUI切換主題的方案有兩套，由於需要直接轉換成css，所以選擇第二套方案：替換var.less中的變數定義。

具體參考文件：更換主題

@import (less) "~heyui/themes/var.less";
//重新定義主題
@primary-color: #FDA729;
@red-color: #D64244;
@green-color: #3cb357;
@yellow-color: #EAC12C;
@blue-color: #77A2DC;
@import (less) "~heyui/themes/common.less";

//使用這種方式引用，可以在自己的less檔案中使用var.less定義的變數。
@import (less) "自己的less檔案";
複製程式碼

開發步驟

1、提取系統的less檔案

官網系統之前只有一套主題，所以官網系統只有一個獨立的doc.less檔案。

現在要生成4套主題，所以系統的樣式需要獨立出來。

- doc.less
- index.less
- var.less
複製程式碼

index.less作為系統預設的主題，doc.less是系統中定義的樣式。

2、定義四套主題

如下所示，在doc中新建themes資料夾，儲存四套主題。

HeyUI元件庫 | 如何實現線上切換主題

主題的大致內容就是定義樣式變數，引用系統中的less檔案。

以yellow中的index.less為例：


@import (less) "../../../themes/var.less";

// Color
@primary-color : #b6cf4d;
@link-color : @primary-color;
@blue-color : #356ba8; //info
@green-color : #378c2b; //success
@yellow-color : #aa9f30; //warn
@red-color : #8c2b3a; //error

@input-height: 32px;

@import (less) "../../../themes/common.less";
@import (less) "../../css/doc.less";

複製程式碼

3、生成四套主題css檔案

由於四套主題都是需要非同步載入的，所以需要先編譯成css檔案。

這一點和ant-design以及element不一樣，他們都是使用後端實時生成css檔案，但是大致的邏輯是一致的。

新建命令檔案gencss.sh，並且執行：

lessc ./doc/themes/yellow/index.less>./doc/themes/yellow/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/red/index.less>./doc/themes/red/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/pink/index.less>./doc/themes/pink/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
lessc ./doc/themes/lavender/index.less>./doc/themes/lavender/index.css -x -rp=https://cdn.jsdelivr.net/npm/heyui/themes/fonts/
複製程式碼

4、Js呼叫切換css呼叫

在首頁的方法中新增css的呼叫方法。

dynamicLoadCss(type) {
  let old = document.getElementById('loadcss');
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement('link');
  link.type='text/css';
  link.rel = 'stylesheet';
  link.href = `/themes/${type}/index.css`;
  link.id = 'loadcss';
  head.appendChild(link);
  // delete old link
  if(old) {
    head.removeChild(old);
  }
}
複製程式碼

至此，線上切換主題色的開發就完成了。

HeyUI

其實在10月份，HeyUI也完成走馬燈與穿梭框的開發。

如果感興趣，也可以去看看：

或許你還對HeyUI不熟悉，歡迎去我們的github參觀：

github.com/heyui/heyui

當然，star的行為也是極其鼓勵的??。

下週，我們將計劃開發HeyUI的Admin系統，盡請期待。

相關文章