# Fa Theme Customizer

为 Fantastic-admin...

- Repository: https://github.com/fantastic-admin/basic (3422 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-22
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add fantastic-admin/basic --skill fa-theme-customizer -g -a claude-code -y`
Codex: `npx skills add fantastic-admin/basic --skill fa-theme-customizer -g -a codex -y`
Cursor: `npx skills add fantastic-admin/basic --skill fa-theme-customizer -g -a cursor -y`
Gemini CLI: `npx skills add fantastic-admin/basic --skill fa-theme-customizer -g -a gemini-cli -y`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 主题定制器

为 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` 中替换新主题，格式严格遵循现有主题结构：

The rest: https://github.com/fantastic-admin/basic/blob/HEAD/.agents/skills/fa-theme-customizer/SKILL.md