主题与设计令牌 | Nimbus 中文文档

整个视觉系统定义在 src/styles/globals.css 中 — 一组扁平的 CSS 自定义属性（--nb-*），暴露给 Tailwind 使用。这是你重新定义站点品牌时需要编辑的唯一文件。

设计令牌

令牌以自定义属性的形式定义，并通过 @theme 块暴露给 Tailwind，因此 bg-card、text-foreground、border-border 等工具类会解析到这些属性。颜色使用 oklch 色彩空间以实现感知均匀性。

src/styles/globals.csscss

:root {
  --nb-background: oklch(0.99 0 0);
  --nb-foreground: oklch(0.21 0 0);
  --nb-primary: oklch(0.145 0 0);
  --nb-border: oklch(0.935 0 0);
  /* 状态色：--nb-info / --nb-success / --nb-warning / --nb-danger */
}

每个表面色都配有一个前景色以确保对比度（card / card-foreground），名称是功能性的 — primary（操作）、accent（悬停表面）、muted（弱化）— 而非视觉描述。在此处修改一个值，所有使用该令牌的地方都会自动更新。

暗色模式

暗色模式由 <html> 上的 [data-mode="dark"] 属性驱动，主题切换按钮会翻转该属性。Tailwind 的 dark: 变体连接到同一个信号，因此 dark:bg-card 无需重复声明选择器即可生效。在暗色模式块中覆盖任意令牌：

[data-mode="dark"] {
  --nb-background: oklch(0.21 0 0);
  --nb-foreground: oklch(0.97 0 0);
}

代码块会自动跟随 — Shiki 同时输出亮色和暗色主题为 CSS 变量，属性会在两者之间切换（参见代码块）。

布局与排版

同一个文件还包含布局和排版令牌 — 侧边栏宽度、内容区最大宽度以及自托管字体栈：

--nb-sidebar-width: 18.75rem;
--nb-toc-width: 18rem;
--nb-content-max: 43.5rem;
--nb-font-sans: "Inter Variable", system-ui, sans-serif;

正文排版样式定义在 src/styles/prose.css 中。这两个文件都由你自由编辑。