---
title: "主题与设计令牌"
description: "通过 globals.css 中的设计令牌自定义颜色、间距和排版。"
---
> Documentation Index
> Fetch the complete documentation index at: https://nimbus-docs.cn/llms.txt
> Use this file to discover all available pages before exploring further.
# 主题与设计令牌
整个视觉系统定义在 `src/styles/globals.css` 中 — 一组扁平的 CSS 自定义属性（`--nb-*`），暴露给 Tailwind 使用。这是你重新定义站点品牌时需要编辑的唯一文件。
设计令牌
令牌以自定义属性的形式定义，并通过 `@theme` 块暴露给 Tailwind，因此 `bg-card`、`text-foreground`、`border-border` 等工具类会解析到这些属性。颜色使用 `oklch` 色彩空间以实现感知均匀性。
```css title="src/styles/globals.css"
: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`（弱化）— 而非视觉描述。在此处修改一个值，所有使用该令牌的地方都会自动更新。
暗色模式
暗色模式由 `` 上的 `[data-mode="dark"]` 属性驱动，主题切换按钮会翻转该属性。Tailwind 的 `dark:` 变体连接到同一个信号，因此 `dark:bg-card` 无需重复声明选择器即可生效。在暗色模式块中覆盖任意令牌：
```css
[data-mode="dark"] {
--nb-background: oklch(0.21 0 0);
--nb-foreground: oklch(0.97 0 0);
}
```
代码块会自动跟随 — Shiki 同时输出亮色和暗色主题为 CSS 变量，属性会在两者之间切换（参见[代码块](/writing/code-blocks)）。
布局与排版
同一个文件还包含布局和排版令牌 — 侧边栏宽度、内容区最大宽度以及自托管字体栈：
```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` 中。这两个文件都由你自由编辑。
Source: https://nimbus-docs.cn/styling/theme-and-tokens/index.mdx