Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/luckyAisen/vant-theme

A vant online theme preview tool that supports all versions of vant 一个 vant 在线主题预览工具,支持 vant 所有版本
https://github.com/luckyAisen/vant-theme

vant vant-theme

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README

        

# 简介

`Vant Theme` 是一个 `Vant` 组件库**在线主题预览工具**,**支持 `Vant` 所有版本。**

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

`Vant Theme` 通过 `Vant` 提供的**样式变量**进行修改,它能够及时反馈修改后的样式。

`Vant 2.x` 通过编译 `less` 实现修改后的样式。

在线预览:[https://luckyaisen.github.io/vant-theme](https://luckyaisen.github.io/vant-theme)

仓库地址:[https://github.com/luckyaisen/vant-theme](https://github.com/luckyaisen/vant-theme)

开发 `Vant Theme` 工具的目的,是为了解决以下问题:

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

- 你可以分享给你公司的设计师,让 TA 在设计页面时,能根据团队的设计规范来设计组件。当设计师交付设计稿时,并一同交付 `Vant Theme` 配置文件,可以省去一些相关的沟通和人力工作。

## 预览

**亮色模式**

![light-1](https://github.com/Aisen60/vant-theme/assets/19791710/b3834731-2045-4121-beb2-cfc488b9e51b)

![light-2](https://github.com/Aisen60/vant-theme/assets/19791710/5345161a-84b6-402c-8fae-24b6167ab050)

![light-3](https://github.com/Aisen60/vant-theme/assets/19791710/c2682375-5d75-40a5-9418-0b45f0063400)

![light-4](https://github.com/Aisen60/vant-theme/assets/19791710/0f313f69-9a1b-4ede-851c-1c27f92046aa)

**暗色模式**

![dark-1](https://github.com/Aisen60/vant-theme/assets/19791710/5f617db7-a46d-49c5-ae88-82038526bdf3)

![dark-2](https://github.com/Aisen60/vant-theme/assets/19791710/9578ed3d-aca0-40ad-b6ee-e9d7dc6798a3)

![dark-3](https://github.com/Aisen60/vant-theme/assets/19791710/925df505-0558-4865-b7f2-cc1979f61d5f)

![dark-4](https://github.com/Aisen60/vant-theme/assets/19791710/76435ac5-e736-4f05-88b5-a1669edd3d81)