version temp3

VANT_THEME_CONFIG.md

@@ -1,32 +1,39 @@
 # Vant 主题色配置说明
 
 ## 概述
-本项目已配置 Vant UI 组件库的主题色为 `#a22525`，所有相关组件都会使用这个颜色作为主色调。
+本项目已配置 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: #a22525;
+  --van-primary-color: #5D7EEB;
 }
 ```
 
 ### 方法二：直接覆盖组件样式
 ```css
 .van-button--primary {
-  background-color: #a22525 !important;
-  border-color: #a22525 !important;
+  background-color: #5D7EEB !important;
+  border-color: #5D7EEB !important;
 }
 ```
 
+### 方法三：使用Tailwind类名
+```html
+<button class="bg-primary text-white">按钮</button>
+```
+
 ## 已配置的组件
 
-以下组件已经配置为主题色 `#a22525`：
+以下组件已经配置为主题色 `#5D7EEB`：
 
 ### 基础组件
 - ✅ 按钮 (Button) - 主要按钮
@@ -80,15 +87,49 @@
 如果需要修改主题色，只需要：
 
 1. 修改 `src/assets/vant-theme.css` 文件中的颜色值
-2. 将所有的 `#a22525` 替换为新的颜色值
-3. 同时更新 `theme` 文件中的颜色值
+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(162, 85, 37, 0.8)`
+2. 配置了激活状态的半透明效果 `rgba(93, 126, 235, 0.8)`
 3. 部分组件配置了悬停和聚焦状态的颜色
 4. 所有配置都基于 Vant 4.x 版本
+5. 支持暗色主题自动切换
+6. 提供了完整的颜色变量系统，便于维护和扩展
 
 ## 参考文档