vant+vue3自定义主题

很多系统都会有切换主题的 功能，现在做的是一个vant的项目，特地记录一下

这里面用到的css3的一个技术，也就是变量，css3的var()和自定义变量,具体使用可百度

大题逻辑是这样

 

有两种方式来实现

1. theme.css里的变量用和vant一致的变量名，例如theme.css最后的几个变量。然后使用的时候直接把变量名换一下就可以了

优点： 简单，使用方便

缺点： 文档没有写明各个变量是控制什么的颜色

 

 2.自己建变量，然后自己在style标签里用自己定义的变量

优点：直观，自己定义的自己比较熟悉，定制化比较有优势

缺点： 每个页面都要写一遍，如果是多人开发项目要提前告知其他开发者使用规范，不然后期调试麻烦

 

 上面的 三个页面的代码还是要写的，然后上图是多写的，使用自定义变量时就要提前在style标签里写好，这样事件触发后就能实现改变颜色了，