前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载本文档讲解 Fantastic-admin本仓库中由packages/themes/index.ts导出的lightTheme/darkTheme定义的主题体系的核心骨架它由shadcn 标准 token与框架专属--g-*token两类 CSS 变量组成前者控制组件级颜色后者控制布局区域头部、主侧边栏、次侧边栏、标签栏、工具栏的配色。读完本文你将掌握这两类变量的完整清单与取值规范、明暗两套主题在 5 个关键维度上的差异设计、完整暗色--g-*模板以及它们如何通过 UnoCSS 预处理器注入页面并被布局组件实际消费的底层链路从而能够自行创建和定制符合规范的主题配色。一、主题变量的两类构成Fantastic-admin 的主题不是单一的颜色变量表而是由两类职责清晰的变量共同组成shadcn 标准 token— 通用设计系统变量控制按钮、卡片、输入框、弹出层等组件的颜色语义与社区 shadcn/ui 生态保持兼容。框架专属 token--g-*— 控制布局区域颜色例如头部Header、主导航MainSidebar、次导航SubSidebar、标签栏Tabbar、工具栏Toolbar、主内容区MainArea是 Fantastic-admin 对通用 token 的布局级扩展。这种分层设计的价值在于shadcn 标准 token 负责组件语义什么状态该用什么色--g-*负责区域归属哪个布局区域引用哪个语义色二者通过oklch(var(--xxx))这种引用式赋值串联起来使得改一个语义色即可联动整个布局。源码佐证主题定义与注入位置主题定义文件packages/themes/index.ts以as const导出lightTheme与darkTheme跨所有应用共享注入实现uno.config.ts 中名为unocss-preset-shadcn的 UnoCSS preset通过entriesToCss(Object.entries(lightTheme))把变量写入:root通过entriesToCss(Object.entries(darkTheme))写入.dark并在configDeps中声明对packages/themes/index.ts的依赖使主题文件变更可被构建工具自动追踪。// uno.config.ts 中注入主题变量的核心片段 toArray(:root).map(root ${root}{color-scheme:light;${entriesToCss(Object.entries(lightTheme))}}).join(), toArray(.dark).map(root ${root}{color-scheme:dark;${entriesToCss(Object.entries(darkTheme))}}).join(),二、shadcn 标准 Token 详解shadcn 标准 token 的取值格式为L C H——OKLCH 三个数值用空格分隔不含oklch()包裹例如1 0 0即纯白oklch(1 0 0)。变量作用--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从 uno.config.ts 可以看到这些 token 被映射为 UnoCSS 主题色板background、foreground、primary、secondary、muted、accent、destructive、border、input、ring等组件中可直接使用bg-primary、text-muted-foreground这类工具类其底层色值即oklch(var(--xxx))。默认色值参考当前仓库实际值明色主题packages/themes/index.ts--background: 1 0 0, // oklch(1 0 0) 纯白 --foreground: 0.145 0 0, // 近黑文字 --card: 1 0 0, --card-foreground: 0.145 0 0, --popover: 1 0 0, --popover-foreground: 0.145 0 0, --primary: 0.205 0 0, // 深色主按钮 --primary-foreground: 0.985 0 0, --secondary: 0.97 0 0, --secondary-foreground: 0.205 0 0, --muted: 0.97 0 0, --muted-foreground: 0.556 0 0, --accent: 0.97 0 0, --accent-foreground: 0.205 0 0, --destructive: 0.577 0.245 27.325, // 红色系通常保持不变 --border: 0.922 0 0, --input: 0.922 0 0, --ring: 0.708 0 0,三、框架专属 Token--g-*框架专属 token 的取值格式为oklch(L C H)或oklch(var(--xxx))——含oklch()包裹且通常直接引用 shadcn 标准 token形成语义色 → 区域色的引用链。变量作用--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工具栏背景布局组件如何消费这些变量从源码结构看每个布局区域组件都直接以 CSS 变量声明其样式主题换色无需改动组件逻辑主内容区apps/core/src/layouts/index.vue 中background-color: var(--g-main-area-bg)头部apps/core/src/layouts/components/Header/index.vue 中background-color: var(--g-header-bg)菜单项通过text-[var(--g-header-menu-color)]、hover:(text-[var(--g-header-menu-hover-color)] bg-[var(--g-header-menu-hover-bg)])、bg-[var(--g-header-menu-active-bg)]等工具类引用对应状态变量主侧边栏apps/core/src/layouts/components/MainSidebar/index.vue 中声明color: var(--g-main-sidebar-menu-color)、background-color: var(--g-main-sidebar-bg)及各 hover/active 状态次侧边栏apps/core/src/layouts/components/Menu/item.vue 中通过text-[var(--g-sub-sidebar-menu-color)]、bg-[var(--g-sub-sidebar-menu-active-bg)]消费次导航变量标签栏apps/core/src/layouts/components/Topbar/Tabbar/index.vue 中background-color: var(--g-tabbar-bg)工具栏apps/core/src/layouts/components/Topbar/Toolbar/index.vue 中bg-[var(--g-toolbar-bg)]。四、明色与暗色的 5 处关键差异明色与暗色主题除了色值深浅不同外在--g-*变量的取值策略上存在 5 处刻意设计的差异。理解这些差异是手写暗色主题模板的前提。差异一菜单激活状态明色激活态使用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%),暗色使用accent并叠加 50% 透明度让 hover 反馈更克制。差异四标签栏激活背景// 明色 --g-tabbar-tab-active-bg: oklch(var(--background)), // 暗色 --g-tabbar-tab-active-bg: oklch(var(--secondary)),差异五菜单颜色引用菜单项默认文字颜色明色引用accent-foreground暗色引用muted-foreground——暗色下文字弱化突出可读层级// 明色使用 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-*模板以下是可直接复制使用的完整暗色--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)), },对照第 4 节可以逐条验证暗色模板全部采用accent激活、muted-foreground菜单文字、background同源的主内容区并且标签栏 hover/激活使用带透明度的accent系取值。六、如何基于本结构创建自定义主题结合 skills/fa-theme-customizer/SKILL.md 描述的工作流自定义主题的实操路径如下确认设计风格若没有明确的品牌色可参考 skills/fa-theme-customizer/references/design-styles.md 中收录的 20 种设计风格配色吉卜力、赛博朋克、莫兰迪、北欧极简、瑞士国际主义等或 tweakcn 社区主题的 shadcn CSS 变量。生成 OKLCH 色值框架使用 OKLCH 色彩空间shadcn token 格式为L C H不含oklch()包裹。转换规则参考明色背景1 0 0纯白或接近白色的暖/冷色调暗色背景0.141 0.005 285.823默认深灰或更深的色调主色primary明色通常比暗色亮度L 值高 0.050.1。替换主题文件在 packages/themes/index.ts 中替换lightTheme与darkTheme格式严格遵循第 2、3 节的变量清单与第 5 节的暗色模板类型由as const自动推断无需手动更新类型定义。始终同时生成明色与暗色两套主题并套用第 4 节的 5 处明暗差异规则。主题开关的运行时配置主题的明暗切换由设置系统驱动packages/settings/src/types.ts 中ThemeSettings.colorScheme支持light | dark | 表示跟随系统另有radius圆角系数01默认 0.5与colorAmblyopia色弱模式两个主题相关配置默认值定义在 packages/settings/src/default.tscolorScheme: light、radius: 0.5、colorAmblyopia: false。.dark类名的挂载与:root的切换即由该配置联动uno.config.ts中的预置 CSS 生效。七、小结Fantastic-admin 的主题体系用shadcn 标准 token 框架专属--g-*token两层结构实现了组件语义色与布局区域色的解耦shadcn token 以裸L C H数值定义语义--g-*以oklch(var(--xxx))引用语义并分发到头部、主/次侧边栏、标签栏、工具栏等区域明暗两套主题在菜单激活、主内容区背景、标签栏 hover/激活、菜单颜色引用 5 个维度上采用差异化取值策略。掌握 packages/themes/index.ts 中的变量结构即可为 Fantastic-admin 创建符合规范、明暗自洽的全新主题。赞分享前端AI 技能【免费下载链接】basic⭐⭐⭐⭐⭐ 面向 AI 编程的管理系统框架兼容PC、移动端。AI-oriented management system framework, compatible with PC and mobile device.项目地址https://gitcode.com/GitHub_Trending/ba/basic点击查看免费下载相关推荐LeetCode-Book 最小栈LCR 147双栈解法全解析getMin() O(1) 实现的原理、函数设计与三语言代码LeetCode Book 最小栈LCR 147双栈解法全解析getMin O 1 实现的原理、函数设计与三语言代码 导读 本文以 LeetCode Bo前端AI 技能从0到1定制Water.css主题CSS变量全攻略从0到1定制Water.css主题CSS变量全攻略 你是否曾为网站样式调整耗费数小时想让页面既美观又保持简洁本文将通过CSS变量系统教你30分钟内定制专前端如何快速掌握TileMapDual打造精美六边形地图的完整教程如何快速掌握TileMapDual打造精美六边形地图的完整教程 想要在Godot中创建令人惊艳的六边形蜂窝地图吗TileMapDual这款强大的双网格瓦片系游戏开发开发工具上一篇探索SOFA-PBRPC百度开源的高性能RPC框架下一篇5步完成FastDepth模型训练NYU Depth V2数据集实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考