tydata-webview-v2/VANT_THEME_CONFIG.md

# Vant 主题色配置说明

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

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

## 配置方法

### 方法一：CSS 变量覆盖（推荐）
```css
:root {
  --van-primary-color: #5D7EEB;
}
```

### 方法二：直接覆盖组件样式
```css
.van-button--primary {
  background-color: #5D7EEB !important;
  border-color: #5D7EEB !important;
}
```

### 方法三：使用Tailwind类名
```html
<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 组件的主题色应用情况。

## 自定义主题色

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

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

## 颜色管理规范

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

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

### 2. 使用Tailwind类名
```html
<!-- 推荐：使用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-*`: 边框颜色

## 注意事项

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

## 参考文档

- [Vant 主题定制官方文档](https://vant-ui.github.io/vant-weapp/#/theme)
- [Vant 样式变量参考](https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less)