# 主题配色系统方案
## 设计理念
基于用户提供的色值系统，构建专业、现代的视频编辑工作台配色方案。
## 色值定义
### 主色系统
```css
--primary-100: #2563eb /* 标准蓝 - 主要操作 */ --primary-200: #598ef3
/* 浅蓝 - hover 状态 */ --primary-300: #d3e6fe /* 极浅蓝 - 背景提示 */;
```
### 强调色系统
```css
--accent-100: #d946ef /* 洋红 - 特殊强调 */ --accent-200: #fae8ff
/* 浅粉 - 强调背景 */;
```
### 文字系统
```css
--text-100: #cbd5e1 /* 主要文字（暗色主题） */ --text-200: #94a3b8
/* 次要文字（暗色主题） */;
```
### 背景系统
```css
--bg-100: #1e293b /* 最深背景层 */ --bg-200: #334155 /* 卡片/面板背景 */
--bg-300: #475569 /* 浮层/弹窗背景 */;
```
## 暗色主题映射
| Tailwind 令牌 | 色值 | 用途 |
| ------------- | --------- | ------------ |
| `background` | `#1e293b` | 页面主背景 |
| `foreground` | `#cbd5e1` | 主要文字 |
| `card` | `#334155` | 卡片背景 |
| `primary` | `#2563eb` | 主按钮、链接 |
| `accent` | `#d946ef` | 特殊强调元素 |
| `muted` | `#475569` | 禁用状态 |
| `border` | `#475569` | 边框分隔 |
## 亮色主题设计
### 核心原则
1. **无阴影设计**：所有控件使用边框分隔，不使用 `box-shadow`
2. **高对比度**：确保文字清晰可读
3. **扁平化**：现代简洁风格
### 配色方案
```css
背景：#ffffff (纯白)
卡片：#f8fafc (极浅灰)
主色：#2563eb (与暗色一致)
强调：#d946ef (与暗色一致)
文字：#0f172a (深灰黑)
次要文字：#64748b (中灰)
边框：#e2e8f0 (浅灰边框)
输入框：#f1f5f9 (浅灰背景)
```
### 焦点状态
```css
/* 移除默认 box-shadow */
box-shadow: none !important;
/* 使用 outline 替代 */
outline: 2px solid var(--color-ring);
outline-offset: -1px;
```
## 功能色系统
| 类型 | 色值 | 用途 |
| ------- | --------- | ------------------ |
| Success | `#10b981` | 成功提示、完成状态 |
| Warning | `#f59e0b` | 警告提示 |
| Error | `#ef4444` | 错误提示、删除操作 |
| Info | `#3b82f6` | 信息提示 |
## 轨道颜色系统
针对视频编辑时间轴的不同轨道类型：
```css
--color-track-storyboard: #3b82f6 /* 分镜轨道 - 蓝色 */
--color-track-resource: #8b5cf6 /* 资源轨道 - 紫色 */
--color-track-video: #10b981 /* 视频轨道 - 绿色 */
--color-track-sound: #f59e0b /* 音效轨道 - 橙色 */
--color-track-subtitle: #ef4444 /* 字幕轨道 - 红色 */
--color-track-voice: #06b6d4 /* 配音轨道 - 青色 */;
```
## 使用示例
### 按钮
```tsx
// 主按钮
// 强调按钮
```
### 输入框（亮色主题无阴影）
```tsx
```
### 卡片
```tsx
内容
```
## 对比度检查
### 暗色主题
- 背景 `#1e293b` vs 文字 `#cbd5e1`：**WCAG AAA** ✅
- 主色 `#2563eb` vs 白色文字：**WCAG AA** ✅
### 亮色主题
- 背景 `#ffffff` vs 文字 `#0f172a`：**WCAG AAA** ✅
- 主色 `#2563eb` vs 白色文字：**WCAG AA** ✅
## 实现细节
### Tailwind v4 配置
所有颜色通过 `@theme` 指令定义在 `globals.css` 中，无需 `tailwind.config.js`。
### 主题切换
通过 `settingsStore` 给 `` 添加 `.light` 或 `.dark` 类实现切换。
### 扩展变量
非 Tailwind 标准的颜色（如轨道颜色）定义在 `:root` 中，通过 `var()` 引用。
---
**创建时间**：2025-01-14
**版本**：v1.0