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中使用 */
.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中使用 -->
<button class="bg-primary text-white border-primary">
  主要按钮
</button>

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

3. 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)

: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)

:root {
  --van-theme-primary: #your-new-color;
}

3. 更新Tailwind配置 (tailwind.config.js)

colors: {
  primary: {
    DEFAULT: '#your-new-color',
    // ... 其他变体
  }
}

添加新颜色

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

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

📱 响应式颜色

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

🌙 暗色主题

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

@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
• Coolors - 颜色搭配工具

📚 相关文档

• VANT_THEME_CONFIG.md - Vant主题配置说明
• Tailwind CSS Colors
• CSS Custom Properties