vant 组件库在线主题预览工具

[aisen60]

简介

vant-theme是一个 vant 组件库在线主题预览工具，如果你有vant组件库定制主题、动态切换主题的需求，可以使用此工具。vant-theme可以修改vant组件库所提供的样式变量，它能够及时反馈和呈现修改过后的内容。

支持 vant 所有版本

在线预览：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文件内容：

[chenjiahan]

666~ 后续会加到官网的生态链接里，期待继续完善

[aisen60]

不久后将会支持2.x版本 😄

[tangzejian210]

牛啊！加油！

[aisen60]

支持 vant 4 啦~

[aisen60]

支持 vant 所有版本啦~