Fa Theme Customizer
为 Fantastic-admin...
Install
npx skills add fantastic-admin/basic --skill fa-theme-customizer -g -a claude-code -y- Repository
- fantastic-admin/basic3.4k
- Category
- Engineering
- Updated
- 13d ago
- License
- MIT
- Context cost
- Lightabout 1,257 tokens
- Runs scripts
- No, instructions only
What it does
为 Fantastic-admin 框架创建和定制主题配色方案，始终同时生成明色（light）和暗色（dark）两套主题。当用户提到以下任何需求时必须使用此技能：换主题颜色、换配色、做一个 XX 风格的主题、主题太单调了、品牌色是 XXX 帮我生成主题、把 tweakcn 配色转成框架主题、想要暗色/冷色/暖色调、根据设计稿颜色生成主题。即使用户只是描述一种感觉（"清新"、"沉稳"、"科技感"）或提供一个颜色值（"#2563EB"），也应触发此技能。支持"吉卜力"、"赛博朋克"、"莫兰迪"、"北欧极简"等专业设计风格关键词。
主题定制器
为 Fantastic-admin 框架生成符合规范的主题配色。
主题文件位置
- 主题定义：
packages/themes/index.ts（在此替换新主题，跨所有应用共享） - 类型推断：自动从
packages/themes/index.ts的 key 推断，无需手动更新类型
工作流程
第一步：确认设计风格
如果用户没有明确指定颜色，先提供风格参考。读取 references/design-styles.md 获取完整的风格目录和配色建议。
第二步：生成 OKLCH 色值
框架使用 OKLCH 色彩空间，格式为 L C H（不含 oklch() 包裹，直接写三个数值）。
转换规则：
- 明色背景：
1 0 0（纯白）或接近白色的暖/冷色调 - 暗色背景：
0.141 0.005 285.823（默认深灰）或更深的色调 - 主色（primary）：明色通常比暗色亮度（L值）高 0.05~0.1
读取 references/theme-structure.md 了解完整的 CSS 变量说明和取值规范。
第三步：输出主题代码
在 packages/themes/index.ts 中替换新主题，格式严格遵循现有主题结构：
