2.9 KiB
2.9 KiB
Vant 主题色配置说明
概述
本项目已配置 Vant UI 组件库的主题色为 #a22525，所有相关组件都会使用这个颜色作为主色调。
配置文件位置
- 主题配置文件：
src/assets/vant-theme.css - 主样式文件：
src/assets/main.css（已导入主题配置）
配置方法
方法一：CSS 变量覆盖（推荐）
:root {
--van-primary-color: #a22525;
}
方法二：直接覆盖组件样式
.van-button--primary {
background-color: #a22525 !important;
border-color: #a22525 !important;
}
已配置的组件
以下组件已经配置为主题色 #a22525：
基础组件
- ✅ 按钮 (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文件中的颜色值 - 将所有的
#a22525替换为新的颜色值 - 同时更新
theme文件中的颜色值
注意事项
- 使用了
!important来确保样式优先级 - 配置了激活状态的半透明效果
rgba(162, 85, 37, 0.8) - 部分组件配置了悬停和聚焦状态的颜色
- 所有配置都基于 Vant 4.x 版本