主题与换肤 · 梧桐设计语言

一套结构，六套主题。主题只改两样东西：主色（primary / ring / accent / accent-foreground / primary-foreground）和中性灰的色温（background / muted / secondary / border 等的色相，明度阶梯固定）。状态五色、圆角、字号一律不动。这条是刻意的——主题一旦能改二十个变量，半年后就会分叉成几套没人维护得动的色板。

默认主题是「梧桐蓝」——色板来自梧桐智算客户端（主色 #1565c0，页底 #f3f4f3，文字 #1a1c1c），所有梧桐产品不指定主题就是它。内置三套（梧桐蓝、墨黑、石板青）各含浅色 / 暗色；其余四套按下表覆盖，落地时抄进 globals.css 的 [data-theme="…"] 块即可。

主题	适用	`primary`	中性色温	`background`	`border`	`accent`
梧桐蓝 `light`（默认）	智算及全线产品	`#1565c0`	中性	`#f3f4f3`	`#e2e2e2`	`#e8e8e7`
墨黑 `ink`	最克制；数据密集、状态多的应用	`hsl(240 6% 11%)`	stone 暖灰	`hsl(30 6% 95%)`	`hsl(30 6% 89%)`	`hsl(30 6% 93%)`
石板青 `teal`	梧桐品牌色。风电、制造、运维	`hsl(191 78% 21%)`	cool 冷灰	`hsl(200 14% 95%)`	`hsl(200 12% 88%)`	`hsl(191 40% 93%)`
钢蓝 `steel`	政务、国企、院所	`hsl(215 62% 23%)`	slate	`hsl(215 18% 95%)`	`hsl(215 14% 88%)`	`hsl(215 40% 93%)`
松墨 `pine`	新能源、环保、农林水利	`hsl(158 52% 18%)`	warm-green	`hsl(150 10% 95%)`	`hsl(150 9% 88%)`	`hsl(158 28% 92%)`
赭褐 `umber`	建筑、工程咨询	`hsl(24 52% 23%)`	warm	`hsl(32 18% 95%)`	`hsl(32 14% 88%)`	`hsl(30 30% 92%)`
玄紫 `plum`	科技、数据服务	`hsl(265 32% 27%)`	violet-gray	`hsl(270 12% 95%)`	`hsl(270 10% 89%)`	`hsl(265 22% 93%)`

暗色下主色提亮，各主题的暗色 primary：梧桐蓝 #4f9eff（其上文字用深色 #0b1a33——客户端用的白字只有 2.8:1，不达标）、teal hsl(191 53% 55%)、steel hsl(207 56% 64%)、pine hsl(148 43% 56%)、umber hsl(28 48% 62%)、plum hsl(264 42% 72%)；primary-foreground 用该主题的深色（如 teal hsl(191 83% 8%)）。

两个已知的坑

暖色主色在这个结构里是安全的。 早先定过「品牌色不能取暖橙系，否则和警告撞」——在这套结构下可以放宽：主色永远是实心块，状态永远是浅色填充 pill，两者不在同一个视觉层面。深赭褐按钮和琥珀超期 pill 不会打架。但琥珀本身仍归 warning，不做主色。

松墨的 primary 与 success 同为绿色系。 选松墨的客户，「完成」状态芯片要改用实心 success 底 + on-status 字 + 对勾图标来拉开，不能只靠色相。状态展示密集的应用，建议改用墨黑或钢蓝。

落地写法（Tailwind v4）

@theme inline {
  --color-background: var(--background);
  --color-primary: var(--primary);
  --color-success: var(--success);
  --color-success-soft: var(--success-soft);
  /* …每个 token 一行，状态色 shadcn 原生没有，要手动加 */
  --radius-chip: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
}
:root, [data-theme="light"] { --primary: #1565c0; --background: #f3f4f3; … }
[data-theme="ink"]         { --primary: hsl(240 6% 11%); --background: hsl(30 6% 95%); … }
[data-theme="teal"]        { --primary: hsl(191 78% 21%); --background: hsl(200 14% 95%); … }
.dark                      { --background: hsl(207 23% 8%); --primary: hsl(0 0% 92%); … }
.dark[data-theme="teal"]   { --primary: hsl(191 53% 55%); --primary-foreground: hsl(191 83% 8%); }

用 shadcn/ui 做底座时：npx shadcn add 之后立刻改一遍 components/ui/ 里的默认值（Badge 改 rounded-[4px] + 强制图标、字体去掉 Inter、Toast 位置改右下 / 底部），让它从源头就是我们的值，而不是在每个调用点写 className="h-14"。

主题与换肤Theming

两个已知的坑

落地写法（Tailwind v4）