前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载本篇技术指南以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说明background0.97 0.008 850.18 0.012 85米白/深棕primary0.62 0.12 1450.55 0.10 145森林绿secondary0.88 0.06 850.28 0.06 85暖米色accent0.75 0.10 850.35 0.08 85大地棕muted0.92 0.04 850.25 0.04 85浅米色灵感《龙猫》草绿、《千与千寻》暖橙、《哈尔的移动城堡》天蓝新海诚Makoto Shinkai高饱和度的天空蓝与城市光晕强烈的光影对比。变量明色 L C H暗色 L C H说明background0.97 0.005 2400.12 0.015 240冷白/深夜蓝primary0.58 0.22 2400.52 0.20 240天空蓝accent0.75 0.15 550.65 0.18 55黄昏橙muted0.92 0.03 2400.22 0.03 240淡蓝灰灵感《你的名字》黄昏渐变、《天气之子》雨后天空科技/未来风格科技/未来风格的核心是高对比 荧光色通过极暗背景与高饱和度主色的反差营造未来感适合数据大屏、开发者工具、云平台类产品。赛博朋克Cyberpunk霓虹粉紫与深黑的强烈对比高饱和度荧光色。变量明色 L C H暗色 L C H说明background0.95 0.005 3000.08 0.01 300浅紫白/极深黑primary0.65 0.28 3300.72 0.30 330霓虹粉secondary0.60 0.25 2800.55 0.22 280电子紫accent0.75 0.25 1950.70 0.28 195青色荧光border0.85 0.08 3000.25 0.08 300紫色边框灵感《银翼杀手 2049》、《赛博朋克 2077》终端/黑客Terminal经典绿色终端风格深黑背景配荧光绿。变量明色 L C H暗色 L C H说明background0.96 0.01 1450.08 0.01 145浅绿白/终端黑primary0.65 0.22 1450.72 0.25 145荧光绿foreground0.15 0.01 1450.90 0.15 145深绿/亮绿muted0.88 0.04 1450.18 0.04 145暗绿注意此风格显式定义了foreground明色用深绿保证对比度暗色用亮绿模拟终端光晕属于文字颜色反常规的典型用法。深空Deep SpaceNASA 风格的深蓝黑与星云紫科技感十足。变量明色 L C H暗色 L C H说明background0.96 0.008 2500.10 0.015 250冷白/深空蓝primary0.55 0.20 2600.60 0.22 260星云蓝accent0.65 0.18 3000.60 0.20 300星云紫secondary0.88 0.05 2500.20 0.05 250深蓝灰自然/有机风格自然/有机风格普遍压低饱和度C 值用低刺激的柔和色彩营造舒适、克制的氛围适合知识管理、写作工具、健康类产品。莫兰迪Morandi低饱和度的灰调色彩优雅克制源自意大利画家乔治·莫兰迪。变量明色 L C H暗色 L C H说明background0.95 0.008 600.20 0.008 60灰米白/深灰棕primary0.62 0.06 1800.55 0.05 180灰蓝绿secondary0.85 0.04 600.30 0.04 60灰米色accent0.72 0.05 300.40 0.04 30灰玫瑰muted0.90 0.02 600.25 0.02 60浅灰特点所有颜色饱和度C值控制在0.02~0.08之间这是判断莫兰迪风格是否成立的最直接指标。北欧极简Scandinavian白桦木色调干净的白色与自然木色受北欧设计影响。变量明色 L C H暗色 L C H说明background0.98 0.005 800.16 0.008 80纯白/深木色primary0.45 0.08 800.55 0.06 80深木棕secondary0.92 0.03 800.26 0.03 80浅木色accent0.70 0.12 1450.55 0.10 145苔藓绿日式侘寂Wabi-Sabi不完美之美枯山水的灰褐色调禅意十足。变量明色 L C H暗色 L C H说明background0.94 0.01 700.18 0.01 70宣纸白/墨色primary0.40 0.05 700.50 0.04 70枯叶棕accent0.65 0.04 1450.45 0.03 145苔绿border0.82 0.03 700.28 0.03 70淡墨色复古/怀旧风格复古风格通过暖色系与低明度棕色调还原历史质感适合文创、出版、生活方式类产品。蒸汽朋克Steampunk维多利亚时代的铜色与皮革棕工业齿轮美学。变量明色 L C H暗色 L C H说明background0.92 0.02 700.16 0.02 70羊皮纸/深棕primary0.62 0.12 550.58 0.14 55铜金色secondary0.80 0.06 700.28 0.06 70皮革棕accent0.55 0.08 2000.50 0.10 200铜绿洛可可Rococo18世纪法国宫廷风格粉彩色调精致华丽。变量明色 L C H暗色 L C H说明background0.97 0.01 3300.18 0.01 330玫瑰白/深玫瑰primary0.72 0.12 3300.62 0.10 330粉玫瑰secondary0.90 0.05 2800.28 0.05 280淡薰衣草accent0.80 0.08 550.45 0.08 55香槟金复古美式Retro Americana50-70年代美国风格暖橙与奶油色。变量明色 L C H暗色 L C H说明background0.96 0.02 800.18 0.02 80奶油色/深棕primary0.68 0.18 450.62 0.16 45复古橙secondary0.88 0.06 800.28 0.06 80奶油黄accent0.55 0.12 250.50 0.10 25砖红极简主义风格极简主义追求少即是多通常只保留 1 个强调色与黑白灰阶C 值普遍很低甚至为 0适合 SaaS 管理后台、企业级中后台。包豪斯Bauhaus功能主义美学原色红黄蓝与黑白灰的几何构成。变量明色 L C H暗色 L C H说明background1 0 00.14 0 0纯白/纯黑primary0.55 0.25 2600.60 0.22 260包豪斯蓝secondary0.90 0 00.25 0 0浅灰/深灰accent0.65 0.25 250.60 0.22 25包豪斯红瑞士国际主义Swiss International网格系统Helvetica 精神黑白红三色。变量明色 L C H暗色 L C H说明background1 0 00.12 0 0纯白/近黑primary0.50 0.25 250.55 0.22 25瑞士红foreground0.10 0 00.95 0 0近黑/近白muted0.92 0 00.22 0 0浅灰/深灰艺术设计流派艺术流派风格色彩鲜明、个性突出适合创意工具、设计平台、品牌展示型页面。孟菲斯Memphis80年代意大利设计运动高饱和度几何图案大胆撞色。变量明色 L C H暗色 L C H说明background0.97 0.01 3000.15 0.01 300浅紫白/深紫primary0.70 0.25 3300.65 0.22 330孟菲斯粉secondary0.85 0.08 3000.30 0.08 300薰衣草accent0.75 0.22 850.70 0.20 85柠檬黄新艺术运动Art Nouveau有机曲线自然植物纹样金色与绿色。变量明色 L C H暗色 L C H说明background0.96 0.01 800.16 0.01 80象牙白/深橄榄primary0.55 0.12 1450.50 0.10 145橄榄绿accent0.72 0.15 750.65 0.12 75金色secondary0.88 0.04 800.26 0.04 80米色波普艺术Pop Art安迪·沃霍尔风格高对比度鲜艳原色。变量明色 L C H暗色 L C H说明background1 0 00.10 0 0纯白/纯黑primary0.72 0.28 250.68 0.25 25波普红secondary0.88 0.20 850.35 0.15 85波普黄accent0.60 0.25 2400.55 0.22 240波普蓝品牌/商业风格品牌商业风格强调专业可信色彩克制、语义明确直接对标企业级产品。科技蓝Tech Blue企业级科技感参考 IBM、Microsoft 风格。变量明色 L C H暗色 L C H说明background0.98 0.003 2400.13 0.005 240冷白/深蓝黑primary0.55 0.20 2500.60 0.18 250科技蓝secondary0.92 0.02 2400.22 0.02 240浅蓝灰accent0.65 0.15 2000.58 0.12 200青蓝金融绿Finance Green稳健专业参考彭博、路透风格。变量明色 L C H暗色 L C H说明background0.97 0.005 1450.12 0.008 145冷白/深绿黑primary0.52 0.18 1450.58 0.16 145金融绿secondary0.90 0.03 1450.22 0.03 145浅绿灰accent0.65 0.12 850.60 0.10 85金色点缀奢华黑金Luxury高端品牌风格深黑配金色参考 Chanel、Rolex。变量明色 L C H暗色 L C H说明background0.96 0.005 750.10 0.005 75象牙白/近黑primary0.68 0.12 750.72 0.14 75金色foreground0.12 0.005 750.92 0.005 75近黑/近白border0.80 0.06 750.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 中面向感知均匀性的色彩空间三个分量分别为亮度 LLightness0~1、饱和度 CChroma0~0.37 左右与色相 HHue0~360°。Fantastic-admin 的主题色值统一写作L C H三个数值不含oklch()包裹参见 packages/themes/index.ts 中 lightTheme 的写法。亮度L1.0纯白 /0.97~0.99明色背景 /0.50~0.70主色常用范围 /0.10~0.18暗色背景 /0.0纯黑饱和度C0无彩色 /0.01~0.05极低莫兰迪/0.15~0.22中等大多数主题/0.25高饱和赛博朋克色相H0~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 HOKLCH 三个数值不含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.colorSchemelight \| dark \| light颜色方案light明亮模式、dark暗黑模式、跟随系统theme.radiusnumber0.5界面元素圆角大小取值范围 0 到 1theme.colorAmblyopiabooleanfalse是否启用色弱友好的颜色方案在 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.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载相关推荐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 技能上一篇GetQzonehistory 完整教程三步批量导出你的 QQ 空间全部历史说说下一篇使用 gatsby-plugin-sitemap 为 Gatsby 站点自动生成 sitemap.xml创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考