Aisen60 / vant-theme

A vant online theme preview tool that supports all versions of vant 一个 vant 在线主题预览工具,支持 vant 所有版本

Home Page:https://aisen60.gitee.io/vant-theme

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vant-theme 正在进行 next 版本的升级,旧版本代码请查看 website 分支。

简介

vant-theme 是一个 vant 组件库在线主题预览工具支持 Vant 所有版本。

如果你有定制主题、动态切换主题的需求,可以使用此工具。

vant-theme 通过 vant 提供的样式变量进行修改,它能够及时反馈修改后的样式。

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

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

vant-theme 最初的目的是为了解决以下问题:

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

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

预览

theme

theme

console

console

2022-03-22.10.52.15.mov

支持深色模式

theme

theme

console

如何使用

当修改完样式后,点击下载主题按钮,会下载一份压缩包,压缩包中包含了 vant-theme.jsonvariables.cssconfig-provider.json 这三个文件。其中 vant-theme.jsonvant-theme 配置文件,你可以通过导入主题的方式将主题进行导入。variables.cssconfig-provider.json 是样式变量配置文件,你可以通过 CSS 覆盖 的方式,或者 ConfigProvider 覆盖 的方式来配置你的主题。具体请查看官方文档:定制主题

console

vant-theme.json文件内容:

vant-theme.json content

variables.css文件内容:

variables.css content

config-provider.json文件内容:

config-provider.json content

其他

如果这个工具对你有帮助哈,希望给个 star 鼓励一下哈~

About

A vant online theme preview tool that supports all versions of vant 一个 vant 在线主题预览工具,支持 vant 所有版本

https://aisen60.gitee.io/vant-theme

License:MIT License


Languages

Language:Vue 40.2%Language:JavaScript 27.9%Language:TypeScript 25.0%Language:SCSS 5.9%Language:HTML 0.9%