fa-theme-customizer

name: fa-theme-customizer description: 为 Fantastic-admin 框架创建和定制主题配色方案，始终同时生成明色（light）和暗色（dark）两套主题。当用户提到以下任何需求时必须使用此技能：换主题颜色、换配色、做一个 XX 风格的主题、主题太单调了、品牌色是 XXX 帮我生成主题、把 tweakcn 配色转成框架主题、想要暗色/冷色/暖色调、根据设计稿颜色生成主题。即使用户只是描述一种感觉（"清新"、"沉稳"、"科技感"）或提供一个颜色值（"#2563EB"），也应触发此技能。支持"吉卜力"、"赛博朋克"、"莫兰迪"、"北欧极简"等专业设计风格关键词。

主题定制器

为 Fantastic-admin 框架生成符合规范的主题配色。始终同时输出明色和暗色两套主题，缺少任何一套都会导致对应模式下显示异常。

主题系统三层结构

快速工作流

1. 确认需求

• 用户提供颜色/风格 → 直接使用
• 用户描述感觉（"清新"、"沉稳"） → 读取 references/design-styles.md 匹配风格
• 用户提供 tweakcn 链接 → 访问 https://tweakcn.com/community 获取 CSS 变量

2. 生成色值

• 基础色：读取 templates/base-color-template.md，生成 18 个 shadcn token（light + dark）
• 主题色：读取 templates/theme-color-template.md，生成 primary/secondary 覆盖（light + dark）
• 框架色：仅当需要自定义布局配色时修改，模板见 references/theme-structure.md

OKLCH 格式要点（详见 references/oklch-conversion.md）：

• 明色背景：1 0 0 或 0.97~0.99
• 暗色背景：0.14~0.18
• 主色 L 值：明色比暗色高 0.05~0.1
• 饱和度 C：莫兰迪 0.020.08 / 常规 0.150.22 / 高饱和 0.25+

3. 输出代码

修改 packages/themes/index.ts，严格按现有结构添加：

• 基础色 → BASE_COLORS 的 key
• 主题色 → THEMES 的 key

4. 启用主题

修改 apps/<app>/src/settings.ts（先 ls apps/ 确认有哪些应用，询问用户）：

theme: {
  baseColorLight: 'baseName',   // BASE_COLORS 的 key
  baseColorDark: 'baseName',
  light: 'themeName',           // THEMES 的 key
  dark: 'themeName',
}

关键设置项

参考资源索引