我的项目中，原本要提供2个主题，一个深色，一个浅色，原本想利用scss来实现，然而感觉，如果前期，再有3个、4个呢？感觉这种提供几种固定主题的计划，有些不太灵便，正好看到element-ui中主题，能够随便指定

于是也，筹备实现一个随时能够定制的主题性能。

一、参考element-ui中的主题切换

查看element-ui在切换主题时发送的申请



发现，它其实是通过把前端抉择的主题色，当做参数，而后发送给后端，而后让后端生成一个新的css文件，再发给前端。

而后再通过js，将css设置到head中的style上，实现主题切换。

不过须要留神：
返回的css文件，不仅仅是简略的将色彩替换为咱们方才抉择的那个主题色，还须要进行一些“色彩的计算”。


如图所示，button在hover时，会在主题色上有个减淡的成果。

也就是说，对于咱们抉择的任何色彩，都必须计算出一个减淡的色彩值，赋值给那些有hover的class。

我晓得大家会问，色彩我怎么计算？比方红色 #ffff，我如何进行加减乘除？

二、应用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变量。

三、应用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);

如果感觉不错就给个赞吧，你的激励是我后退的能源（置信你看完这篇文章，你会啪的一下站起来，很快啊）