共计 1739 个字符，预计需要花费 5 分钟才能阅读完成。
我的项目中，原本要提供 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);
如果感觉不错就给个赞吧，你的激励是我后退的能源（置信你看完这篇文章，你会啪的一下站起来，很快啊）
