3.8 KiB

Raw Blame History

主题配色系统方案

设计理念

基于用户提供的色值系统，构建专业、现代的视频编辑工作台配色方案。

色值定义

主色系统

--primary-100: #2563eb /* 标准蓝 - 主要操作 */ --primary-200: #598ef3
  /* 浅蓝 - hover 状态 */ --primary-300: #d3e6fe /* 极浅蓝 - 背景提示 */;

强调色系统

--accent-100: #d946ef /* 洋红 - 特殊强调 */ --accent-200: #fae8ff
  /* 浅粉 - 强调背景 */;

文字系统

--text-100: #cbd5e1 /* 主要文字（暗色主题） */ --text-200: #94a3b8
  /* 次要文字（暗色主题） */;

背景系统

--bg-100: #1e293b /* 最深背景层 */ --bg-200: #334155 /* 卡片/面板背景 */
  --bg-300: #475569 /* 浮层/弹窗背景 */;

暗色主题映射

Tailwind 令牌	色值	用途
`background`	`#1e293b`	页面主背景
`foreground`	`#cbd5e1`	主要文字
`card`	`#334155`	卡片背景
`primary`	`#2563eb`	主按钮、链接
`accent`	`#d946ef`	特殊强调元素
`muted`	`#475569`	禁用状态
`border`	`#475569`	边框分隔

亮色主题设计

核心原则

无阴影设计：所有控件使用边框分隔，不使用 box-shadow
高对比度：确保文字清晰可读
扁平化：现代简洁风格

配色方案

背景：#ffffff (纯白)
卡片：#f8fafc (极浅灰)
主色：#2563eb (与暗色一致)
强调：#d946ef (与暗色一致)
文字：#0f172a (深灰黑)
次要文字：#64748b (中灰)
边框：#e2e8f0 (浅灰边框)
输入框：#f1f5f9 (浅灰背景)

焦点状态

/* 移除默认 box-shadow */
box-shadow: none !important;

/* 使用 outline 替代 */
outline: 2px solid var(--color-ring);
outline-offset: -1px;

功能色系统

类型	色值	用途
Success	`#10b981`	成功提示、完成状态
Warning	`#f59e0b`	警告提示
Error	`#ef4444`	错误提示、删除操作
Info	`#3b82f6`	信息提示

轨道颜色系统

针对视频编辑时间轴的不同轨道类型：

--color-track-storyboard: #3b82f6 /* 分镜轨道 - 蓝色 */
  --color-track-resource: #8b5cf6 /* 资源轨道 - 紫色 */
  --color-track-video: #10b981 /* 视频轨道 - 绿色 */
  --color-track-sound: #f59e0b /* 音效轨道 - 橙色 */
  --color-track-subtitle: #ef4444 /* 字幕轨道 - 红色 */
  --color-track-voice: #06b6d4 /* 配音轨道 - 青色 */;

使用示例

按钮

// 主按钮
<button className="bg-primary text-primary-foreground">
  确认
</button>

// 强调按钮
<button className="bg-accent text-accent-foreground">
  特殊操作
</button>

输入框（亮色主题无阴影）

<input className="bg-input border border-border focus:outline-ring" />

卡片

<div className="bg-card text-card-foreground border border-border">内容</div>

对比度检查

暗色主题

背景 #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 给 <html> 添加 .light 或 .dark 类实现切换。

扩展变量

非 Tailwind 标准的颜色（如轨道颜色）定义在 :root 中，通过 var() 引用。

创建时间：2025-01-14 版本：v1.0

3.8 KiB Raw Blame History