- 前端
- AI 技能
【免费下载链接】basic
⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架，兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.
本篇技术指南以skills/fa-theme-customizer/references/design-styles.md为骨架，系统收录 20+ 种可直接落地的专业设计风格配色方案，涵盖日系动画、科技未来、自然有机、复古怀旧、极简主义、艺术流派与品牌商业七大类别。结合本仓库packages/themes/index.ts的主题结构与fa-theme-customizer技能工作流，读者可以快速掌握 OKLCH 色彩空间取值规范、shadcn 标准 Token 与框架专属--g-*Token 的对应关系，并将任意风格配色一键转换成 Fantastic-admin 的明色/暗色双主题代码。
目录
- 日系动画风格
- 科技/未来风格
- 自然/有机风格
- 复古/怀旧风格
- 极简主义风格
- 艺术设计流派
- 品牌/商业风格
- tweakcn 社区风格参考
- OKLCH 快速参考
- 从配色方案到 Fantastic-admin 主题代码
全文配色数据均来自 设计风格配色参考目录，主题结构与明暗差异规则来自 主题 CSS 变量结构说明，实际主题实现见 packages/themes/index.ts。
日系动画风格
日系动画风格的共同特征是：用高度意象化的自然色（草绿、天蓝、暖橙）传递情绪，画面干净通透，适合需要"治愈感""青春感"的管理后台或内容平台。
吉卜力（Ghibli）
宫崎骏作品的自然温暖色调，大地色系与天空蓝的结合。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.97 0.008 85 | 0.18 0.012 85 | 米白/深棕 |
| primary | 0.62 0.12 145 | 0.55 0.10 145 | 森林绿 |
| secondary | 0.88 0.06 85 | 0.28 0.06 85 | 暖米色 |
| accent | 0.75 0.10 85 | 0.35 0.08 85 | 大地棕 |
| muted | 0.92 0.04 85 | 0.25 0.04 85 | 浅米色 |
灵感：《龙猫》草绿、《千与千寻》暖橙、《哈尔的移动城堡》天蓝
新海诚（Makoto Shinkai）
高饱和度的天空蓝与城市光晕，强烈的光影对比。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.97 0.005 240 | 0.12 0.015 240 | 冷白/深夜蓝 |
| primary | 0.58 0.22 240 | 0.52 0.20 240 | 天空蓝 |
| accent | 0.75 0.15 55 | 0.65 0.18 55 | 黄昏橙 |
| muted | 0.92 0.03 240 | 0.22 0.03 240 | 淡蓝灰 |
灵感：《你的名字》黄昏渐变、《天气之子》雨后天空
科技/未来风格
科技/未来风格的核心是"高对比 + 荧光色"，通过极暗背景与高饱和度主色的反差营造未来感，适合数据大屏、开发者工具、云平台类产品。
赛博朋克（Cyberpunk）
霓虹粉紫与深黑的强烈对比，高饱和度荧光色。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.95 0.005 300 | 0.08 0.01 300 | 浅紫白/极深黑 |
| primary | 0.65 0.28 330 | 0.72 0.30 330 | 霓虹粉 |
| secondary | 0.60 0.25 280 | 0.55 0.22 280 | 电子紫 |
| accent | 0.75 0.25 195 | 0.70 0.28 195 | 青色荧光 |
| border | 0.85 0.08 300 | 0.25 0.08 300 | 紫色边框 |
灵感：《银翼杀手 2049》、《赛博朋克 2077》
终端/黑客（Terminal）
经典绿色终端风格，深黑背景配荧光绿。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.96 0.01 145 | 0.08 0.01 145 | 浅绿白/终端黑 |
| primary | 0.65 0.22 145 | 0.72 0.25 145 | 荧光绿 |
| foreground | 0.15 0.01 145 | 0.90 0.15 145 | 深绿/亮绿 |
| muted | 0.88 0.04 145 | 0.18 0.04 145 | 暗绿 |
注意：此风格显式定义了foreground，明色用深绿保证对比度，暗色用亮绿模拟终端光晕，属于"文字颜色反常规"的典型用法。
深空（Deep Space）
NASA 风格的深蓝黑与星云紫，科技感十足。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.96 0.008 250 | 0.10 0.015 250 | 冷白/深空蓝 |
| primary | 0.55 0.20 260 | 0.60 0.22 260 | 星云蓝 |
| accent | 0.65 0.18 300 | 0.60 0.20 300 | 星云紫 |
| secondary | 0.88 0.05 250 | 0.20 0.05 250 | 深蓝灰 |
自然/有机风格
自然/有机风格普遍压低饱和度（C 值），用低刺激的柔和色彩营造舒适、克制的氛围，适合知识管理、写作工具、健康类产品。
莫兰迪（Morandi）
低饱和度的灰调色彩，优雅克制，源自意大利画家乔治·莫兰迪。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.95 0.008 60 | 0.20 0.008 60 | 灰米白/深灰棕 |
| primary | 0.62 0.06 180 | 0.55 0.05 180 | 灰蓝绿 |
| secondary | 0.85 0.04 60 | 0.30 0.04 60 | 灰米色 |
| accent | 0.72 0.05 30 | 0.40 0.04 30 | 灰玫瑰 |
| muted | 0.90 0.02 60 | 0.25 0.02 60 | 浅灰 |
特点：所有颜色饱和度（C值）控制在0.02~0.08之间，这是判断"莫兰迪风格"是否成立的最直接指标。
北欧极简（Scandinavian）
白桦木色调，干净的白色与自然木色，受北欧设计影响。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.98 0.005 80 | 0.16 0.008 80 | 纯白/深木色 |
| primary | 0.45 0.08 80 | 0.55 0.06 80 | 深木棕 |
| secondary | 0.92 0.03 80 | 0.26 0.03 80 | 浅木色 |
| accent | 0.70 0.12 145 | 0.55 0.10 145 | 苔藓绿 |
日式侘寂（Wabi-Sabi）
不完美之美，枯山水的灰褐色调，禅意十足。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.94 0.01 70 | 0.18 0.01 70 | 宣纸白/墨色 |
| primary | 0.40 0.05 70 | 0.50 0.04 70 | 枯叶棕 |
| accent | 0.65 0.04 145 | 0.45 0.03 145 | 苔绿 |
| border | 0.82 0.03 70 | 0.28 0.03 70 | 淡墨色 |
复古/怀旧风格
复古风格通过暖色系与低明度棕色调还原历史质感，适合文创、出版、生活方式类产品。
蒸汽朋克（Steampunk）
维多利亚时代的铜色与皮革棕，工业齿轮美学。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.92 0.02 70 | 0.16 0.02 70 | 羊皮纸/深棕 |
| primary | 0.62 0.12 55 | 0.58 0.14 55 | 铜金色 |
| secondary | 0.80 0.06 70 | 0.28 0.06 70 | 皮革棕 |
| accent | 0.55 0.08 200 | 0.50 0.10 200 | 铜绿 |
洛可可（Rococo）
18世纪法国宫廷风格，粉彩色调，精致华丽。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.97 0.01 330 | 0.18 0.01 330 | 玫瑰白/深玫瑰 |
| primary | 0.72 0.12 330 | 0.62 0.10 330 | 粉玫瑰 |
| secondary | 0.90 0.05 280 | 0.28 0.05 280 | 淡薰衣草 |
| accent | 0.80 0.08 55 | 0.45 0.08 55 | 香槟金 |
复古美式（Retro Americana）
50-70年代美国风格，暖橙与奶油色。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.96 0.02 80 | 0.18 0.02 80 | 奶油色/深棕 |
| primary | 0.68 0.18 45 | 0.62 0.16 45 | 复古橙 |
| secondary | 0.88 0.06 80 | 0.28 0.06 80 | 奶油黄 |
| accent | 0.55 0.12 25 | 0.50 0.10 25 | 砖红 |
极简主义风格
极简主义追求"少即是多"，通常只保留 1 个强调色与黑白灰阶，C 值普遍很低甚至为 0，适合 SaaS 管理后台、企业级中后台。
包豪斯（Bauhaus）
功能主义美学，原色（红黄蓝）与黑白灰的几何构成。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 1 0 0 | 0.14 0 0 | 纯白/纯黑 |
| primary | 0.55 0.25 260 | 0.60 0.22 260 | 包豪斯蓝 |
| secondary | 0.90 0 0 | 0.25 0 0 | 浅灰/深灰 |
| accent | 0.65 0.25 25 | 0.60 0.22 25 | 包豪斯红 |
瑞士国际主义（Swiss International）
网格系统，Helvetica 精神，黑白红三色。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 1 0 0 | 0.12 0 0 | 纯白/近黑 |
| primary | 0.50 0.25 25 | 0.55 0.22 25 | 瑞士红 |
| foreground | 0.10 0 0 | 0.95 0 0 | 近黑/近白 |
| muted | 0.92 0 0 | 0.22 0 0 | 浅灰/深灰 |
艺术设计流派
艺术流派风格色彩鲜明、个性突出，适合创意工具、设计平台、品牌展示型页面。
孟菲斯（Memphis）
80年代意大利设计运动，高饱和度几何图案，大胆撞色。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.97 0.01 300 | 0.15 0.01 300 | 浅紫白/深紫 |
| primary | 0.70 0.25 330 | 0.65 0.22 330 | 孟菲斯粉 |
| secondary | 0.85 0.08 300 | 0.30 0.08 300 | 薰衣草 |
| accent | 0.75 0.22 85 | 0.70 0.20 85 | 柠檬黄 |
新艺术运动（Art Nouveau）
有机曲线，自然植物纹样，金色与绿色。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.96 0.01 80 | 0.16 0.01 80 | 象牙白/深橄榄 |
| primary | 0.55 0.12 145 | 0.50 0.10 145 | 橄榄绿 |
| accent | 0.72 0.15 75 | 0.65 0.12 75 | 金色 |
| secondary | 0.88 0.04 80 | 0.26 0.04 80 | 米色 |
波普艺术（Pop Art）
安迪·沃霍尔风格，高对比度，鲜艳原色。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 1 0 0 | 0.10 0 0 | 纯白/纯黑 |
| primary | 0.72 0.28 25 | 0.68 0.25 25 | 波普红 |
| secondary | 0.88 0.20 85 | 0.35 0.15 85 | 波普黄 |
| accent | 0.60 0.25 240 | 0.55 0.22 240 | 波普蓝 |
品牌/商业风格
品牌商业风格强调"专业可信"，色彩克制、语义明确，直接对标企业级产品。
科技蓝（Tech Blue）
企业级科技感，参考 IBM、Microsoft 风格。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.98 0.003 240 | 0.13 0.005 240 | 冷白/深蓝黑 |
| primary | 0.55 0.20 250 | 0.60 0.18 250 | 科技蓝 |
| secondary | 0.92 0.02 240 | 0.22 0.02 240 | 浅蓝灰 |
| accent | 0.65 0.15 200 | 0.58 0.12 200 | 青蓝 |
金融绿（Finance Green）
稳健专业，参考彭博、路透风格。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.97 0.005 145 | 0.12 0.008 145 | 冷白/深绿黑 |
| primary | 0.52 0.18 145 | 0.58 0.16 145 | 金融绿 |
| secondary | 0.90 0.03 145 | 0.22 0.03 145 | 浅绿灰 |
| accent | 0.65 0.12 85 | 0.60 0.10 85 | 金色点缀 |
奢华黑金（Luxury）
高端品牌风格，深黑配金色，参考 Chanel、Rolex。
| 变量 | 明色 L C H | 暗色 L C H | 说明 |
|---|---|---|---|
| background | 0.96 0.005 75 | 0.10 0.005 75 | 象牙白/近黑 |
| primary | 0.68 0.12 75 | 0.72 0.14 75 | 金色 |
| foreground | 0.12 0.005 75 | 0.92 0.005 75 | 近黑/近白 |
| border | 0.80 0.06 75 | 0.25 0.06 75 | 金色边框 |
tweakcn 社区风格参考
tweakcn 是 shadcn/ui 的主题社区，提供大量社区贡献的配色方案，可作为现成的设计资源直接复用。
如何使用社区主题
- 访问 tweakcn 社区页面浏览社区主题
- 找到喜欢的主题，点击查看其 CSS 变量
- 社区主题使用标准 shadcn CSS 变量格式，可直接转换
转换说明
社区主题的 CSS 变量格式通常为：
:root { --background: oklch(1 0 0); --primary: oklch(0.623 0.214 259.815); }转换到框架格式时，去掉oklch()包裹，只保留三个数值，再补充框架专属的--g-*变量。
知名社区主题风格
- Catppuccin— 柔和粉彩，有 Latte/Frappé/Macchiato/Mocha 四个变体
- Dracula— 经典暗色，紫色系
- Nord— 北极极光，冷蓝色系
- Solarized— 护眼配色，暖黄底色
- Gruvbox— 复古暖色，棕黄系
- Tokyo Night— 深蓝紫夜晚城市风格
- One Dark— Atom 编辑器经典暗色主题
- Everforest— 森林绿色系，护眼舒适
这些社区主题普遍以暗色为主，选中后建议按下方"明暗差异五原则"补全配套的明色变体，保证 Fantastic-admin 在两种色彩方案下都可用。
OKLCH 快速参考
OKLCH 是 CSS Color 4 中面向感知均匀性的色彩空间，三个分量分别为亮度 L（Lightness，0~1）、饱和度 C（Chroma，0~0.37 左右）与色相 H（Hue，0~360°）。Fantastic-admin 的主题色值统一写作'L C H'三个数值（不含oklch()包裹），参见 packages/themes/index.ts 中 lightTheme 的写法。
亮度（L）
1.0纯白 /0.97~0.99明色背景 /0.50~0.70主色常用范围 /0.10~0.18暗色背景 /0.0纯黑
饱和度（C）
0无彩色 /0.01~0.05极低（莫兰迪）/0.15~0.22中等（大多数主题）/0.25+高饱和（赛博朋克）
色相（H）
0~30红 /30~60橙棕 /60~90黄 /90~150绿 /150~210青 /210~270蓝 /270~330紫 /330~360粉玫瑰
对照上方风格表即可发现规律：同一风格下，明暗两套配色的 H 值几乎不变，改变的只是 L（亮度）与 C（饱和度），这也是从明色推导暗色的核心方法。
从配色方案到 Fantastic-admin 主题代码
拿到一组风格配色后，需要把它落成 Fantastic-admin 可识别的主题对象。整个转换链路如下：
- 从本目录 design-styles.md 选定风格并取出明暗两套
L C H数值； - 按 theme-structure.md 的变量分类，把数值填入 shadcn 标准 Token，再组装
--g-*框架专属 Token； - 将成果替换到 packages/themes/index.ts 的
lightTheme/darkTheme对象中（类型由 key 自动推断，无需手动更新类型）。
主题变量的两类组成
主题由两类变量组成：
- shadcn 标准 token— 通用设计系统变量，控制组件颜色
- 框架专属 token（
--g-*）— 控制布局区域颜色
shadcn 标准 Token 格式为'L C H'（OKLCH 三个数值，不含oklch()包裹），完整清单如下：
| 变量 | 作用 |
|---|---|
--background | 页面主背景色 |
--foreground | 主文字颜色 |
--card | 卡片背景色（通常同 background） |
--card-foreground | 卡片文字颜色 |
--popover | 弹出层背景色 |
--popover-foreground | 弹出层文字颜色 |
--primary | 主色调（按钮、高亮、激活状态） |
--primary-foreground | 主色上的文字颜色 |
--secondary | 次要色（次要按钮、标签背景） |
--secondary-foreground | 次要色上的文字颜色 |
--muted | 静音色（禁用状态、次要背景） |
--muted-foreground | 静音色上的文字颜色 |
--accent | 强调色（hover 状态背景） |
--accent-foreground | 强调色上的文字颜色 |
--destructive | 危险/错误色（删除、警告） |
--border | 边框颜色 |
--input | 输入框边框颜色 |
--ring | 焦点环颜色（通常同 primary） |
框架专属 Token 格式为'oklch(L C H)'或'oklch(var(--xxx))'（含oklch()包裹），完整清单如下：
| 变量 | 作用 |
|---|---|
--g-main-area-bg | 主内容区域背景 |
--g-header-bg | 顶部背景 |
--g-header-color | 顶部文字颜色 |
--g-header-menu-color | 顶部导航菜单项文字颜色 |
--g-header-menu-hover-bg | 顶部导航菜单项 hover 背景 |
--g-header-menu-hover-color | 顶部导航菜单项 hover 文字颜色 |
--g-header-menu-active-bg | 顶部导航菜单项激活背景 |
--g-header-menu-active-color | 顶部导航菜单项激活文字颜色 |
--g-main-sidebar-bg | 主侧边栏背景 |
--g-main-sidebar-menu-color | 主侧边栏导航菜单文字颜色 |
--g-main-sidebar-menu-hover-bg | 主侧边栏导航菜单 hover 背景 |
--g-main-sidebar-menu-hover-color | 主侧边栏导航菜单 hover 文字颜色 |
--g-main-sidebar-menu-active-bg | 主侧边栏导航菜单激活背景 |
--g-main-sidebar-menu-active-color | 主侧边栏导航菜单激活文字颜色 |
--g-sub-sidebar-bg | 次侧边栏背景 |
--g-sub-sidebar-menu-color | 次侧边栏导航菜单文字颜色 |
--g-sub-sidebar-menu-hover-bg | 次侧边栏导航菜单 hover 背景 |
--g-sub-sidebar-menu-hover-color | 次侧边栏导航菜单 hover 文字颜色 |
--g-sub-sidebar-menu-active-bg | 次侧边栏导航菜单激活背景 |
--g-sub-sidebar-menu-active-color | 次侧边栏导航菜单激活文字颜色 |
--g-tabbar-bg | 标签栏背景 |
--g-tabbar-tab-color | 标签项文字颜色 |
--g-tabbar-tab-hover-bg | 标签项 hover 背景 |
--g-tabbar-tab-hover-color | 标签项 hover 文字颜色 |
--g-tabbar-tab-active-bg | 标签项激活背景 |
--g-tabbar-tab-active-color | 标签项激活文字颜色 |
--g-toolbar-bg | 工具栏背景 |
明色与暗色的 5 处关键差异
直接照搬同一套--g-*写法会导致暗色主题层次混乱，明暗主题之间存在 5 处必须区分的差异（源码依据见 theme-structure.md 及 packages/themes/index.ts 中 lightTheme/darkTheme 的对照）。
差异一：菜单激活状态— 明色使用primary，暗色使用accent：
// 明色 '--g-header-menu-active-bg': 'oklch(var(--primary))', '--g-header-menu-active-color': 'oklch(var(--primary-foreground))', // 暗色 '--g-header-menu-active-bg': 'oklch(var(--accent))', '--g-header-menu-active-color': 'oklch(var(--accent-foreground))',同样适用于--g-main-sidebar-menu-active-*和--g-sub-sidebar-menu-active-*。
差异二：主内容区背景：
// 明色：略深于背景，形成层次感 '--g-main-area-bg': 'oklch(0.9612 0 0)', // 暗色：与背景相同，避免过多层次 '--g-main-area-bg': 'oklch(var(--background))',差异三：标签栏 hover 背景：
// 明色 '--g-tabbar-tab-hover-bg': 'oklch(var(--border))', // 暗色 '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)',差异四：标签栏激活背景：
// 明色 '--g-tabbar-tab-active-bg': 'oklch(var(--background))', // 暗色 '--g-tabbar-tab-active-bg': 'oklch(var(--secondary))',差异五：菜单颜色引用：
// 明色：使用 accent-foreground '--g-header-menu-color': 'oklch(var(--accent-foreground))', '--g-header-menu-hover-color': 'oklch(var(--accent-foreground))', // 暗色：使用 muted-foreground '--g-header-menu-color': 'oklch(var(--muted-foreground))', '--g-header-menu-hover-color': 'oklch(var(--muted-foreground))',完整暗色--g-*模板
将风格表中的暗色L C H填入dark块的 shadcn token 后，--g-*部分可直接套用以下模板（与 packages/themes/index.ts 的 darkTheme 一致）：
dark: { // shadcn token ... '--g-main-area-bg': 'oklch(var(--background))', '--g-header-bg': 'oklch(var(--background))', '--g-header-color': 'oklch(var(--foreground))', '--g-header-menu-color': 'oklch(var(--muted-foreground))', '--g-header-menu-hover-bg': 'oklch(var(--muted))', '--g-header-menu-hover-color': 'oklch(var(--muted-foreground))', '--g-header-menu-active-bg': 'oklch(var(--accent))', '--g-header-menu-active-color': 'oklch(var(--accent-foreground))', '--g-main-sidebar-bg': 'oklch(var(--background))', '--g-main-sidebar-menu-color': 'oklch(var(--muted-foreground))', '--g-main-sidebar-menu-hover-bg': 'oklch(var(--muted))', '--g-main-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))', '--g-main-sidebar-menu-active-bg': 'oklch(var(--accent))', '--g-main-sidebar-menu-active-color': 'oklch(var(--accent-foreground))', '--g-sub-sidebar-bg': 'oklch(var(--background))', '--g-sub-sidebar-menu-color': 'oklch(var(--muted-foreground))', '--g-sub-sidebar-menu-hover-bg': 'oklch(var(--muted))', '--g-sub-sidebar-menu-hover-color': 'oklch(var(--muted-foreground))', '--g-sub-sidebar-menu-active-bg': 'oklch(var(--accent))', '--g-sub-sidebar-menu-active-color': 'oklch(var(--accent-foreground))', '--g-tabbar-bg': 'oklch(var(--background))', '--g-tabbar-tab-color': 'oklch(var(--accent-foreground) / 50%)', '--g-tabbar-tab-hover-bg': 'oklch(var(--accent) / 50%)', '--g-tabbar-tab-hover-color': 'oklch(var(--accent-foreground) / 50%)', '--g-tabbar-tab-active-bg': 'oklch(var(--accent))', '--g-tabbar-tab-active-color': 'oklch(var(--foreground))', '--g-toolbar-bg': 'oklch(var(--background))', },明色light块的--g-*则按差异一、二、三、五所述，替换为primary/accent-foreground/border/ 固定数值等写法，可对照 packages/themes/index.ts 中的 lightTheme 逐一核对。
在应用层面启用主题
主题对象写入 packages/themes/index.ts 后，跨所有应用共享。应用侧的theme配置控制主题的呈现方式，相关配置项定义在 packages/settings/src/types.ts 的ThemeSettings中，默认值见 packages/settings/src/default.ts：
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
theme.colorScheme | 'light' \| 'dark' \| '' | 'light' | 颜色方案：'light'明亮模式、'dark'暗黑模式、''跟随系统 |
theme.radius | number | 0.5 | 界面元素圆角大小，取值范围 0 到 1 |
theme.colorAmblyopia | boolean | false | 是否启用色弱友好的颜色方案 |
在 apps/core/src/settings.ts（或任意应用入口的 settings 文件）中通过setSettings写入即可生效；示例应用 apps/example/src/settings.ts 展示了toolbar.colorScheme: true等更多开关的完整写法。若同时设置toolbar.colorScheme为true，用户即可在运行时手动切换明暗主题，所见即所得地验证新配色。
实战建议：风格选型速查
- 默认安全：科技蓝 / 金融绿 / 瑞士国际主义 — 适合绝大多数企业级中后台，用户接受度最高；
- 开发者向：终端/黑客 / 赛博朋克 / 深空 — 适合开发者工具、云平台、数据产品；
- 内容社区向：吉卜力 / 北欧极简 / 莫兰迪 — 适合知识平台、写作工具、健康类产品；
- 品牌展示向：奢华黑金 / 波普艺术 / 孟菲斯 — 适合官网、营销页、创意工具；
- 护眼舒适：Solarized / Everforest / 日式侘寂 — 低饱和低刺激，适合长时间阅读场景。
所有风格均同时提供了明色与暗色两套L C H数值，可直接套用上文的完整模板生成lightTheme/darkTheme，一次完成双主题定制。
- 前端
- AI 技能
【免费下载链接】basic
⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架，兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.
相关推荐
Fantastic-admin 主题配色设计风格参考：OKLCH 色值速查与 20+ 种专业风格落地指南
Fantastic admin 主题配色设计风格参考：OKLCH 色值速查与 20+ 种专业风格落地指南 本文以 设计风格配色参考目录 https://link
前端AI 技能Fantastic-admin 主题定制指南：基于 OKLCH 色彩空间的明暗双主题配色系统
Fantastic admin 主题定制指南：基于 OKLCH 色彩空间的明暗双主题配色系统 本文以 Fantastic admin 仓库中 skills/fa
前端AI 技能Fantastic-admin 主题定制：基于 OKLCH 色彩空间与明暗双 token 体系的配色系统实现
Fantastic admin 主题定制：基于 OKLCH 色彩空间与明暗双 token 体系的配色系统实现 主题定制是后台管理系统最直观的个性化能力。本文以当
前端AI 技能
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
