如何動態自定義webapp全局主題

時間 2019-11-05

原文原文鏈接

前幾天看到一個問題，挺多人問：一個web app 的動態自定義主題如何實現，意思是用戶在webapp 中自定義一套配色，整個網站（包括全部組件）的主題相應變化如何實現？由於正好是在黃軼大佬的Element組件庫揭祕的文章中看到相關內容，雖然大佬沒有給出後端實現，但實際上方案已經很明確了。因此我拿node.js搭配vue-cli 簡單快速地實現了一遍動態定義webapp全局主題的思路。css

一套LESS，動態編譯

簡單說下，流程如上圖，用戶在前端配置一套主題以後，把顏色配置發給後端服務。後端最關鍵的階段是拿到顏色配置，而後找到 存儲顏色變量的less文件，重寫顏色，生成新的less 文件，再編譯全部的less 樣式文件爲一個css文件。

具體到咱們的例子，我把顏色變量放在customTemplate.less 中，這個文件和前端項目實際用的less 文件是同一套，除了顏色變量是 $primary ,$primary-color 等等樣式，爲了方便腳本中去替換。通常地，變量都定義在vars.less，入口文件是index.less，組件的樣式定義在單獨的模塊中。這裏爲了快速演示就寫到一個文件裏了。前端

在咱們的例子中，node.js腳本中替換了 $primary ,$primary-color，把新的樣式寫入custom.less 中，而後再經過node.js 的exec函數去執行命令行，即vue

lessc -x custom.less styles.cssnode

把custom.less入口文件所引用的全部組件樣式總體編譯爲一個styles.css。git

到這一步，咱們就生成了新的自定義樣式。接着，經過請求返回給瀏覽器，前端邏輯中會建立一個新的style標籤，填入返回的css，插入<head> 標籤的最後一行。這會直接overwrite前一套樣式，由此就完成了動態自定義webapp主題。github

可能存在的問題

效率，若是組件特別多，lessc compiler 過程的速度，我並無測試過，會不會太長而影響用戶體驗。不過能夠經過進度條提示主題更新的進度，這也是Element UI 網站所採用的策略web
懶加載組件，目前我只是用了多個路由去簡單測試多組件在動態主題切換中，會自動根據全局主題色去更新本身內部的樣式。若是採用懶加載策略，理論上在切換主題後，若是點擊到從未加載過的路由，該路由內部的樣式會處於上一個主題色，應該會出現不一致。也就是說在接受到自定義主題請求後，若是server不針對該用戶從新編譯懶加載路由樣式的服務，那這個樣式不一致的問題就會出現！vue-cli

因此對於懶加載路由（包含js和css），須要額外的資源去作新主題樣式的編譯，這也是須要權衡的。後端

Theme Switcher項目地址瀏覽器