主题工厂（Theme Factory）

通过精选的主题（含配色方案与字体组合），为任意产出物施加统一、专业的视觉样式。

适用场景

• 为幻灯片、报告或文档赋予一致的视觉识别体系
• 为 HTML 页面或落地页应用配色方案与字体组合
• 选择预置主题，快速实现专业化排版
• 当现有预设主题均不契合需求时，创建自定义主题

使用方法

步骤 1：展示可用主题

向用户呈现 10 种可用主题及其描述：

步骤 2：获取用户选择

询问用户希望应用哪一个主题，并在获得明确确认后才继续执行。

步骤 3：应用主题

1. 从 themes/ 目录中读取所选主题文件
2. 在整个产出物中一致地应用颜色与字体
3. 确保足够的对比度与可读性
4. 在所有页面/幻灯片中保持该主题的视觉一致性

主题文件结构

themes/ 目录下的每个主题均遵循以下格式：

# 主题名称

关于视觉氛围与灵感来源的简要说明。

## 颜色方案（Color Palette）
- **主深色（Primary Dark）**: `#hex` — 使用说明
- **强调色（Accent）**: `#hex` — 使用说明
- **辅助色（Secondary）**: `#hex` — 使用说明
- **浅色/背景色（Light/Background）**: `#hex` — 使用说明

## 字体排印（Typography）
- **标题字体（Headers）**: 字体族名称
- **正文字体（Body Text）**: 字体族名称

## 最佳适用场景（Best Used For）
适用上下文与目标受众说明。

针对不同产出物的主题应用方式

幻灯片（Slide Decks）

• 背景：标题页使用主深色；内容页使用浅色/背景色
• 标题：使用标题字体，并以强调色呈现
• 正文：在浅色背景上使用正文字体，并以主深色呈现文字
• 装饰元素：图表、高亮区域、分隔线等使用强调色或辅助色

HTML / 落地页（HTML / Landing Pages）

:root {
  --theme-primary: #hex;     /* 来源于主题的主深色 */
  --theme-accent: #hex;      /* 来源于主题的强调色 */
  --theme-secondary: #hex;   /* 来源于主题的辅助色 */
  --theme-bg: #hex;          /* 来源于主题的浅色/背景色 */
  --theme-font-heading: "Theme Header Font", sans-serif;
  --theme-font-body: "Theme Body Font", sans-serif;
}

文档 / 报告（Documents / Reports）

• 封面页：主深色背景搭配浅色文字
• 章节标题：强调色 + 标题字体
• 正文内容：正文字体置于浅色背景之上
• 图表/表格：数据系列使用强调色与辅助色区分
• 提示框（Callout boxes）：辅助色作背景，主深色作文字

创建自定义主题

当无预设主题契合需求时，可生成自定义主题：

1. 收集输入信息 — 了解品牌调性、目标受众、期望氛围与使用上下文
2. 选定配色方案 — 精心挑选 4 种构成协调整体的色彩：
   • 一种深色锚点色（用于背景、正文）
   • 一种主强调色（用于重点强调、CTA 按钮）
   • 一种辅助强调色（用于次要元素）
   • 一种浅色/中性色（用于背景、留白）
3. 搭配字体 — 选择互补的标题字体与正文字体：
   • 标题字体：具辨识度、体现个性
   • 正文字体：易读性强、简洁清晰
4. 验证对比度 — 确保文本与背景色满足 WCAG AA 级可访问性标准
5. 命名主题 — 赋予一个能传达其视觉感受的富有表现力的名称
6. 撰写文档 — 按照标准格式编写主题文件
7. 审核确认 — 在正式应用前向用户展示主题并获取批准

配色协调规则

• 互补色（Complementary）：色环上相对位置的颜色（高对比度）
• 邻近色（Analogous）：色环上相邻的颜色（和谐统一）
• 三角色（Triadic）：色环上等距分布的三种颜色（鲜明且平衡）
• 分裂互补色（Split-complementary）：基础色 + 其互补色两侧相邻的两种颜色（灵活多变）

对比度指南

应用任何主题时，均须确保可读性：

最终确定前，请测试强调色在明/暗两种背景下的可读性表现。

可用主题列表

所有主题定义均位于 themes/ 目录中：

• themes/ocean-depths.md
• themes/sunset-boulevard.md
• themes/forest-canopy.md
• themes/modern-minimalist.md
• themes/golden-hour.md
• themes/arctic-frost.md
• themes/desert-rose.md
• themes/tech-innovation.md
• themes/botanical-garden.md
• themes/midnight-galaxy.md

严禁事项（NEVER Do）

• 未经确认即应用主题 — 必须始终获得用户的明确选择
• 混用不同主题的颜色 — 每个主题均为独立完整的视觉单元
• 忽略对比度要求 — 可读性优先于美学表现
• 将强调色用于大段文字 — 强调色仅限于突出显示用途
• 跳过字体搭配环节 — 标题字体与正文字体必须相互协调
• 硬编码主题数值 — 应使用 CSS 自定义属性（CSS variables）以支持便捷的主题切换

相关能力

• design-system-patterns — Token 架构与主题化基础设施
• distinctive-design-systems — 视觉美学文档与独特视觉识别体系构建