tydata-webview-v2/COLOR_GUIDE.md

# 颜色使用指南

## 🎨 主题色系统

本项目采用统一的颜色管理系统，支持主题切换和颜色规范化管理。

### 主色调
- **主色调**: `#5D7EEB` (蓝色)
- **CSS变量**: `var(--color-primary)`
- **Tailwind类名**: `bg-primary`, `text-primary`, `border-primary`

## 📁 文件结构

```
src/assets/
├── colors.css          # 统一颜色变量定义
├── vant-theme.css      # Vant组件主题配置
├── main.css           # 主样式文件（导入所有样式）
└── base.css           # 基础样式

tailwind.config.js     # Tailwind颜色配置
```

## 🎯 使用方式

### 1. CSS变量方式（推荐）

```css
/* 在CSS中使用 */
.my-button {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-border-primary);
}

.my-text {
  color: var(--color-text-secondary);
}
```

### 2. Tailwind类名方式

```html
<!-- 在HTML中使用 -->
<button class="bg-primary text-white border-primary">
  主要按钮
</button>

<div class="text-gray-600 bg-gray-50">
  文本内容
</div>
```

### 3. Vue组件中使用

```vue
<template>
  <div class="service-card" :style="{ backgroundColor: serviceColor }">
    <h3 class="text-primary">{{ title }}</h3>
    <p class="text-gray-600">{{ description }}</p>
  </div>
</template>

<script setup>
// 使用CSS变量
const serviceColor = 'var(--color-service-personal)';
</script>
```

## 🌈 颜色分类

### 主题色系
- `--color-primary`: 主色调 (#5D7EEB)
- `--color-primary-50` 到 `--color-primary-900`: 主色调渐变
- `--color-primary-light`: 浅色变体
- `--color-primary-dark`: 深色变体

### 语义化颜色
- `--color-success`: 成功色 (#07c160)
- `--color-warning`: 警告色 (#ff976a)
- `--color-danger`: 危险色 (#ee0a24)
- `--color-info`: 信息色 (#1989fa)

### 文本颜色
- `--color-text-primary`: 主要文本 (#323233)
- `--color-text-secondary`: 次要文本 (#646566)
- `--color-text-tertiary`: 三级文本 (#969799)
- `--color-text-white`: 白色文本 (#ffffff)

### 背景颜色
- `--color-bg-primary`: 主要背景 (#ffffff)
- `--color-bg-secondary`: 次要背景 (#fafafa)
- `--color-bg-tertiary`: 三级背景 (#f8f8f8)

### 业务特定颜色
- `--color-service-personal`: 个人大数据服务色
- `--color-service-company`: 小微企业服务色
- `--color-service-loan`: 贷前背调服务色

## 🔧 自定义主题

### 修改主色调

1. **更新CSS变量** (`src/assets/colors.css`)
```css
:root {
  --color-primary: #your-new-color;
  --color-primary-light: rgba(your-rgb, 0.1);
  --color-primary-dark: rgba(your-rgb, 0.8);
}
```

2. **更新Vant主题** (`src/assets/vant-theme.css`)
```css
:root {
  --van-theme-primary: #your-new-color;
}
```

3. **更新Tailwind配置** (`tailwind.config.js`)
```js
colors: {
  primary: {
    DEFAULT: '#your-new-color',
    // ... 其他变体
  }
}
```

### 添加新颜色

在 `src/assets/colors.css` 中添加：

```css
:root {
  --color-custom: #your-color;
  --color-custom-light: rgba(your-rgb, 0.1);
}
```

## 📱 响应式颜色

```css
/* 移动端特定颜色 */
@media (max-width: 768px) {
  .text-primary-mobile { 
    color: var(--color-primary) !important; 
  }
}
```

## 🌙 暗色主题

项目支持暗色主题自动切换：

```css
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #ffffff;
    --color-bg-primary: #1a1a1a;
    /* ... 其他暗色变量 */
  }
}
```

## ✅ 最佳实践

### 推荐做法
- ✅ 使用CSS变量而不是硬编码颜色
- ✅ 使用语义化的颜色名称
- ✅ 使用Tailwind类名进行快速开发
- ✅ 保持颜色命名的一致性

### 避免做法
- ❌ 硬编码颜色值 (`color: #5D7EEB`)
- ❌ 使用任意值 (`bg-[#5D7EEB]`)
- ❌ 混合使用不同的颜色管理方式
- ❌ 忽略颜色对比度和可访问性

## 🔍 调试工具

### 浏览器开发者工具
1. 打开开发者工具
2. 在Elements面板中查看CSS变量
3. 在Computed面板中查看最终计算值

### 颜色检查工具
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
- [Coolors](https://coolors.co/) - 颜色搭配工具

## 📚 相关文档

- [VANT_THEME_CONFIG.md](./VANT_THEME_CONFIG.md) - Vant主题配置说明
- [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors)
- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)