主题定制 · Yi UI

变量体系

所有组件只使用 shadcn 的语义变量：background、foreground、muted-foreground、primary、border 等，不写死任何颜色。换一套变量，整站颜色就随之改变。

线条网格额外引入一个变量 --edge，由前景色按比例混合得到，用于所有线条和分隔带。CLI 安装条目时写入你的 globals.css 的是这样的：

globals.css

@theme inline {
  --color-edge: var(--edge);
}

:root {
  --edge: color-mix(in oklch, var(--foreground) 12%, transparent);
}

.dark {
  --edge: color-mix(in oklch, var(--foreground) 18%, transparent);
}

@theme inline 里的 --color-edge 让 border-edge、bg-edge 这些工具类可用。因为 --edge 跟随 foreground 计算，切换任何颜色主题后线条都会自动适配。grid-layout 以及 stat-card、chart-card、control-panel 等用到线条的条目都会写入它，已存在时不会重复添加。

流程图与图表的辅助色 --flow-blue、--flow-green、--flow-amber、--flow-rose、--flow-violet、--flow-cyan 同样以亮、暗各一份写入 :root 与 .dark，由 flow-diagram、stat-card 等条目带来，不随颜色主题变化，亮暗模式下都保证看得清。

亮暗模式

亮暗模式通过 html 上的 .dark class 切换，本站使用 next-themes 管理。它和颜色主题互不干扰：同一个颜色主题有亮、暗两组变量。

颜色主题

本站提供 14 套颜色主题，色值取自 Tailwind CSS v4 默认调色板（oklch），可以在颜色主题页面实时预览，切换主题与亮暗模式，并复制 CSS。主题名统一按「中文 · English」显示，英文名就是 Tailwind 的色名，也是安装时用的 id。

本站自己用 html 上的 data-theme 属性切换颜色主题。你的项目里安装主题则是另一回事，见下面的「安装主题」。

中性基底 · Neutrals

三个灰族决定整套界面灰阶的色偏：背景、卡片、muted、边框、次要文字和 primary 都取自同一个灰族，选择器里用「浅 / 中 / 深」三段色带展示色偏。

主题	id	亮色 primary	暗色 primary
红色 · Red	`red`	red-600	red-500
橙色 · Orange	`orange`	orange-600	orange-600
琥珀 · Amber	`amber`	amber-600	amber-600
青柠 · Lime	`lime`	lime-600	lime-600
绿色 · Green	`green`	green-700	green-600
青绿 · Teal	`teal`	teal-600	teal-600
天蓝 · Sky	`sky`	sky-600	sky-600
蓝色 · Blue	`blue`	blue-600	blue-500
紫罗兰 · Violet	`violet`	violet-600	violet-500
紫红 · Fuchsia	`fuchsia`	fuchsia-600	fuchsia-500
粉红 · Pink	`pink`	pink-600（明度下调 0.012）	pink-500

彩色主题的按钮一律白字：深色字压在饱和色上发脏，统一白字更协调。为此每个主题取能让白字达到 3:1 的档位（按钮文字是 14px 中粗字，按 WCAG AA 大字 / 界面组件标准）；正文和次要文字仍保证 4.5:1，主色作为文字或图形时对背景至少 3:1。
红色主题的主色和危险色（destructive）本来是同一种红，所以把危险色拉开：亮色改用 red-800，暗色改用 red-300。
校验脚本：pnpm tsx scripts/theme-contrast.ts 会列出全部主题在亮、暗下的对比度，任何一项不达标就以非零状态退出。

之前的 zinc、rose 已移除。浏览器里保存了这两个 id 的访客会自动回落到默认的 neutral，不会报错。

安装主题

每套主题都是一个 registry:theme 条目，命名为 theme-<id>，只写入 CSS 变量，不写文件、不装依赖：

终端

pnpm dlx shadcn@latest add https://yiui.dev/r/theme-blue.json

配置了命名空间时（见 Registry 与命名空间）：

终端

pnpm dlx shadcn@latest add @yiui/theme-blue

实测（theme-blue）：CLI 会直接改写 globals.css 里 :root 与 .dark 中已有的同名变量，共 30 个（--background、--primary、--chart-1~--chart-5、--sidebar-* 等），不会生成 data-theme 选择器，所以一个项目同一时间只有一套主题，装另一套就是覆盖。改过这些变量的话，先提交或备份再安装。

主题不包含 --radius，圆角仍由你的 globals.css 决定；也不包含 --edge 与 --flow-*，线条随新主题的 foreground 自动变色。想像本站一样在运行时切换多套主题，需要自己把各套变量写成 :root[data-theme="…"] 选择器，可以参考颜色主题页面复制的 CSS。

自定义

直接修改 globals.css 里的变量即可。建议只改变量值，不在组件里写具体颜色，这样所有条目都会跟着变化。