前端設置任何顏色做爲主題色(不用預先指定固定幾種)，吐血整理

項目中，原本要提供2個主題，一個深色，一個淺色，原本想利用scss來實現，可是以爲，若是後期，再有3個、4個呢？感受這種提供幾種固定主題的方案，有些不太靈活，正好看到element-ui中主題，能夠隨意指定

因而也，準備實現一個隨時能夠定製的主題功能。

1、參考element-ui中的主題切換

查看element-ui在切換主題時發送的請求



發現，它實際上是經過把前端選擇的主題色，當作參數，而後發送給後端，而後讓後端生成一個新的css文件，再發給前端。

而後再經過js，將css設置到head中的style上，完成主題切換。

不過須要注意：
返回的css文件，不只僅是簡單的將顏色替換爲咱們剛纔選擇的那個主題色，還須要進行一些「顏色的計算」。

如圖所示，button在hover時，會在主題色上有個減淡的效果。

也就是說，對於咱們選擇的任何顏色，都必須計算出一個減淡的顏色值，賦值給那些有hover的class。

我知道你們會問，顏色我怎麼計算？好比白色 #ffff，我如何進行加減乘除？

2、使用color庫，對主題色進行計算

這裏有個神器。名稱叫作 Color， 能夠在npm中搜索，並安裝它。

>npm install color

詳細用法能夠查看npm介紹，這裏不贅述。

那麼又有一個問題來了。我知道怎麼操做它，可是計算規則是什麼？

這個確實很差找，element-ui後端將主題色簡單的規則，咱們也無從得知。

然而，通過我一番嘗試，發現公式很簡單：
將任意的主題色和「不一樣程度的白色」進行「混合」獲得的。

如button的hover，正好是將主題色#8F13ED與0.2程度的白色(1就是徹底白，0就是全黑)進行混合而獲得。

let primaryColor = "#8F13ED";
Color(primaryColor)
  .mix(Color("white"), 0.2)
  .hex()      //#A542F1

順着這個思路，你能夠對照element-ui中某一個主題，能夠將全部的規則都找出來，只不過混合程度不同，有的是0.9，或者0.92，或者0.8等等。

如今解決了如何計算獲得全部與主題色相關的顏色，那麼接下來解決發送請求，後端將這個css文件返回給前端。

不過，我本着前端得事情，前端乾的原則。這個css文件不須要後端返回，而是前端本身生成。

先將模板主題文件下載下來。

而後複製到js中。

這是我已經構造好的文件，因爲比較大，因此放到百度雲下面

連接: https://pan.baidu.com/s/1PpAMjl4dF7zBrvv5zOP2Gg 
 提取碼: gegh

到此爲止，已經解決了，從選擇主題色，到生成對應主題色的css文件的流程，此後，當切換任意顏色時。全部element的組件都會變。但也僅僅是element的組件會變，你自定義的樣式和組件，並不會變。

那麼咱們自定義的組件是如何拿到咱們設置的主題色，以及經過主題色計算出來的相關顏色呢？

可使用css變量。

3、使用css變量

關於什麼是css變量，以及怎麼用。能夠參考阮一峯的這篇文章
CSS 變量教程

並且它的兼容性，也很是好。

簡而言之，就是定義一個，以"--"開頭的變量，這樣瀏覽器就會將它當作一個css的變量來進行處理，而後使用var()引用這個變量。

如:

--hover-color:red;    //定義變量
background-color: val(--hover-color)   //經過css內置函數var，使用變量

打開剛纔從百度網盤下載的index.js。在最後面加上

//設置全局css變量
  jquery("body").attr(
    "style",
    `--primary-color:${primaryColor};
    --success-color:${successColor};
    --warning-color:${warningColor};
    --danger-color:${dangerColor}`
  );

打開瀏覽器控制檯，能夠看到變量已經生效。

以後，你在組件的任何位置想使用 定義好的全局變量，都是沒問題的

background-color: var(--primary-color);

若是以爲不錯就給個贊吧，你的鼓勵是我前進的動力（相信你看完這篇文章，你會啪的一下站起來，很快啊）