196 lines
4.4 KiB
Markdown
196 lines
4.4 KiB
Markdown
# 颜色使用指南
|
||
|
||
## 🎨 主题色系统
|
||
|
||
本项目采用统一的颜色管理系统，支持主题切换和颜色规范化管理。
|
||
|
||
### 主色调
|
||
- **主色调**: `#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)
|