team/tydata-webview-v2

Fork 0

Files

liangzai 4ddb31e663 version temp3

2025-10-28 12:12:48 +08:00

3.9 KiB

Raw Blame History

Vant 主题色配置说明

概述

本项目已配置 Vant UI 组件库的主题色为 #5D7EEB，所有相关组件都会使用这个颜色作为主色调。

配置文件位置

主题配置文件：src/assets/vant-theme.css
统一颜色变量：src/assets/colors.css
主样式文件：src/assets/main.css（已导入主题配置）
Tailwind配置：tailwind.config.js

配置方法

方法一：CSS 变量覆盖（推荐）

:root {
  --van-primary-color: #5D7EEB;
}

方法二：直接覆盖组件样式

.van-button--primary {
  background-color: #5D7EEB !important;
  border-color: #5D7EEB !important;
}

方法三：使用Tailwind类名

<button class="bg-primary text-white">按钮</button>

已配置的组件

以下组件已经配置为主题色 #5D7EEB：

基础组件

✅ 按钮 (Button) - 主要按钮
✅ 开关 (Switch) - 开启状态
✅ 复选框 (Checkbox) - 选中状态
✅ 单选框 (Radio) - 选中状态
✅ 滑动条 (Slider) - 进度条和按钮
✅ 进度条 (Progress) - 进度填充
✅ 评分 (Rate) - 已评分星星
✅ 步进器 (Stepper) - 加减按钮
✅ 标签 (Tag) - 主要类型标签
✅ 徽章 (Badge) - 主要类型徽章

导航组件

✅ 导航栏 (NavBar) - 背景色
✅ 标签栏 (Tabbar) - 激活状态
✅ 步骤条 (Steps) - 激活步骤
✅ 侧边栏 (Sidebar) - 选中项

反馈组件

✅ 通知栏 (NoticeBar) - 主要类型
✅ 轮播图 (Swipe) - 指示器
✅ 加载 (Loading) - 加载动画
✅ 弹窗 (Dialog) - 标题栏

表单组件

✅ 选择器 (Picker) - 确认按钮
✅ 日期选择器 (DatetimePicker) - 确认按钮
✅ 地区选择器 (Area) - 确认按钮
✅ 搜索 (Search) - 操作按钮
✅ 日历 (Calendar) - 选中日期
✅ 时间选择器 (TimePicker) - 确认按钮
✅ 密码输入框 (PasswordInput) - 聚焦边框

业务组件

✅ 商品卡片 (Card) - 价格颜色
✅ 优惠券 (Coupon) - 折扣颜色
✅ 地址编辑 (AddressEdit) - 默认地址
✅ 商品规格选择器 (Sku) - 选中项
✅ 购物车 (SubmitBar) - 价格颜色
✅ 提交订单栏 (SubmitBar) - 主要按钮
✅ 联系人列表 (ContactList) - 选中项
✅ 树形选择器 (TreeSelect) - 选中项

测试页面

可以通过访问 /example 路由来查看主题色配置效果，该页面展示了各种 Vant 组件的主题色应用情况。

自定义主题色

如果需要修改主题色，只需要：

修改 src/assets/vant-theme.css 文件中的颜色值
修改 src/assets/colors.css 文件中的 --color-primary 变量
修改 tailwind.config.js 中的 primary 颜色配置
将所有的 #5D7EEB 替换为新的颜色值

颜色管理规范

1. 使用CSS变量

/* 推荐：使用CSS变量 */
color: var(--color-primary);
background-color: var(--color-bg-primary);

/* 不推荐：硬编码颜色 */
color: #5D7EEB;
background-color: #ffffff;

2. 使用Tailwind类名

<!-- 推荐：使用Tailwind类名 -->
<div class="bg-primary text-white">内容</div>

<!-- 不推荐：使用任意值 -->
<div class="bg-[#5D7EEB] text-[#ffffff]">内容</div>

3. 颜色命名规范

--color-primary: 主色调
--color-success: 成功色
--color-warning: 警告色
--color-danger: 危险色
--color-text-*: 文本颜色
--color-bg-*: 背景颜色
--color-border-*: 边框颜色

注意事项

使用了 !important 来确保样式优先级
配置了激活状态的半透明效果 rgba(93, 126, 235, 0.8)
部分组件配置了悬停和聚焦状态的颜色
所有配置都基于 Vant 4.x 版本
支持暗色主题自动切换
提供了完整的颜色变量系统，便于维护和扩展

3.9 KiB Raw Blame History Unescape Escape