/vant-theme

online theme preview built on Vant UI

Primary LanguageVueMIT LicenseMIT

简介

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

vant3.x版本使用了 CSS 变量 来组织样式。vant-theme就是通过样式覆盖的形式实现的。

**目前只支持 3.x版本,在不久后将支持 2.x版本。 **

在线预览:https://aisen60.github.io/vant-theme 或者 https://aisen60.gitee.io/vant-theme

仓库地址:https://github.com/Aisen60/vant-theme

为什么要做这个工具?

它能解决以下两个问题:

1、在线快速预览,快速的效果反馈,所见即所得。你不在需要在编辑器中重复的进行配置,你只需要在vant-theme 中把你需要自定义的组件样式配置好,下载到本地后引入即可。

2、你可以分享给你公司的设计师,让 TA 在设计页面时,就能根据你团队的设计规范来设计组件了。当设计师交付设计稿给前端时,顺便把下载后的文件交付给你。可以省去一些相关的沟通和人力工作。

预览

首页:

index

主题列表页:

theme

预览页:

theme

theme

如何使用

当修改完样式后,点击下载主题文件按钮,会得到一份css文件和一份json文件。

通过 CSS 覆盖的方式,将下载后的css文件引入到项目中,就可以覆盖 vant 官方默认样式了。

或者通过 ConfigProvider 覆盖的方式,将下载后的json文件中的内容配置到van-config-provider组件的theme-vars中。

具体请查看官方文档:定制主题

下载主题文件按钮所在的位置:

download button

下载后的css文件内容:

css content

下载后的json文件内容:

json content

Todo

  • 使用无头浏览器自动抓取官网样式变量,实现与官方的样式变量保持同步。
  • 支持 vant UI 2.x 版本。
  • 修改记录的撤销、回退。