前端设置任何颜色做为主题色(不用预先指定固定几种)，吐血整理

项目中，原本要提供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);

若是以为不错就给个赞吧，你的鼓励是我前进的动力（相信你看完这篇文章，你会啪的一下站起来，很快啊）