的项目中，原本提供了两种主题，一种是深色，一种是浅色。本来想用scss来实现的，但是感觉如果后期再多3、4个呢？感觉这种提供几个固定主题的方案不是很灵活。刚刚在element-ui中看到了主题，可以随意指定，所以准备实现一个可以随时自定义的主题功能。1、参考element-ui中的主题切换，查看切换主题时element-ui发送的请求。发现它其实是将前端选择的主题色作为参数，然后发送给后端，然后让后端生成一个新的。css文件被发送到前端。然后用js给head中的style设置css，完成主题切换。不过需要注意的是，返回的css文件不仅仅是简单的将颜色替换为我们刚刚选择的主题色，还需要进行一些“颜色计算”。如图，当按钮悬停时，会在主题色上产生淡化效果。换句话说，对于我们选择的任何颜色，我们必须计算一个变亮的颜色值并将其分配给那些有悬停的类。我知道大家会问，我怎么计算颜色？像小白#ffff，加减乘除怎么加？2.使用色库计算主题色。这里有神器。名字叫Color，你可以在npm中搜索并安装。>npminstallcolor的详细使用方法请参考npm介绍，这里不再赘述。那么还有一个问题。我知道如何操作，但计算规则是什么？这个真的不好找，我们也无从知道element-ui后台的主题色的简单规则。但是，经过一番实验，我发现这个公式很简单：将任意主题色与“不同程度的白色”“混合”得到。例如按钮的悬停是通过主题色#8F13ED混合0.2度的白色（1为全白，0为全黑）得到的。letprimaryColor="#8F13ED";Color(primaryColor).mix(Color("white"),0.2).hex()//#A542F1按照这个思路，你可以在element-ui中比较某个主题，你可以All规律都找到了，只是混合的程度不一样，有的是0.9，有的是0.92，有的是0.8等等。既然我们已经解决了如何计算与主题色相关的所有颜色，那么接下来就是解决发送请求，后台会将css文件返回给前台。但是，我本着前端把事情做好，前端做事的原则。这个css文件不需要后端返回，而是由前端自己生成的。先下载模板主题文件。然后复制到js中。这是我已经构建的文件。因为比较大，所以我放在了百度云的链接下：https://pan.baidu.com/s/1PpAMjl4dF7zBrvv5zOP2Gg提取码：gegh至此已经解决。从选择主题色，到生成主题色对应的css文件，再到切换任意颜色时的过程。所有元素组件都会发生变化。但是只有元素的组件会发生变化，而您自定义的样式和组件不会发生变化。那么我们的自定义组件如何获取我们设置的主题色以及通过主题色计算出的相关颜色呢？您可以使用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}`);打开浏览器控制台，可以看到变量已经生效。之后，如果你想在组件的任何地方使用定义的全局变量，就没有问题了。背景色：var(--primary-color);如果觉得不错，就点个赞吧。你的鼓励是我前进的动力（相信看完这篇文章，你会啪的一声站起来，很快）
