先上一个已实现好的链接 codesandbox.io/s/autumn-cd…

 我先写了一个demo

js

less

先来看下效果

发现很符合我们的需求，于是将同样的代码迁到我们的项目中，只是需要多加一个配置

可是发现并不生效，在项目中通过多次尝试，查阅资料无果，既然有坑，那就不深挖了，于是便自己实现了个方法来切换less变量的值。

变量名都是一一对应关系，区分就是值不同（如light中的fontColor是黑色，对应的dark中的是白色）。

大概的思路就是给body标签设置一个class，然后通过js切换class值，less根据此属性来判断使用对应主题变量。

首先在public/index.html的body添加一个class，以展示默认主题， 这里用的theme-light

通过切换body的class以达到切换主题的效果

less函数：

如何写样式呢

注：“@fontColor”和"@bgColor"之所以用引号括起来， 是因为我们没有在全局配置此变量，这里只是为了索引的作用，加上@符号为了容易区分。

这时候，一定有人会想这样使用（css简写）

我们对方法进行一下初步的改造

这时候我们再来看下实现效果

还不错，就是样式被分开了，这样调试起来也不是很方便。

如何整合到一起呢？

less函数：

最后我们这样使用

最终效果