vant-theme
是一个 vant
组件库在线主题预览工具,如果你有vant
组件库定制主题、动态切换主题的需求,可以使用此工具。vant-theme
可以修改vant
组件库所提供的样式变量,它能够及时反馈和呈现修改过后的内容。
vant 3
和 vant 4
版本使用了 CSS 变量 来组织样式。vant-theme
就是通过样式覆盖的形式实现的。
目前只支持 vant 3
和 vant 4
版本,在不久后将支持 Vant 2
版本。
在线预览:https://aisen60.github.io/vant-theme 或者 https://aisen60.gitee.io/vant-theme
仓库地址:https://github.com/Aisen60/vant-theme
它能解决以下两个问题:
1、在线快速预览,快速的效果反馈,所见即所得。你不在需要在编辑器中重复的进行配置,你只需要在vant-theme
中把你需要自定义的组件样式配置好,下载到本地后引入即可。
2、你可以分享给你公司的设计师,让 TA 在设计页面时,就能根据你团队的设计规范来设计组件了。当设计师交付设计稿给前端时,顺便把下载后的文件交付给你。可以省去一些相关的沟通和人力工作。
2022-03-22.10.52.15.mov
当修改完样式后,点击下载主题按钮,会下载一份压缩包,压缩包中包含了 vant-theme.json
、variables.css
、config-provider.json
这三个文件。其中 vant-theme.json
是 vant-theme
配置文件,你可以通过导入主题的方式将主题进行导入。variables.css
、config-provider.json
是样式变量配置文件,你可以通过 CSS 覆盖 的方式,或者 ConfigProvider 覆盖 的方式来配置你的主题。具体请查看官方文档:定制主题 。
vant-theme.json
文件内容:
variables.css
文件内容:
config-provider.json
文件内容: