02 · Design Token 生成

扩展可选色板、调整默认值或色阶规则时需阅读本篇；仅通过定制器切换主题无需改代码。

数据源

文件	职责
scripts/color-themes.data.mjs	18 种 Primary、9 种 Neutral、5 档 Radius（维护入口）
scripts/generate-color-theme-css.mjs	生成脚本，通常无需修改

生成命令

vpr generate:color-themes

产出：

• src/theme/styles/color-tokens.css — 按 data-color-primary 等切换的变量
• src/theme/styles/neutral-scales.css — 扩展中性色（taupe、mauve 等）
• src/theme/lib/customizer/options.json — 定制器选项清单

勿手改生成产物

color-tokens.css 等会在下次生成时被覆盖；应修改 color-themes.data.mjs 后重新执行命令。

Primary 色阶约定

与 Nuxt UI 对齐：亮色主色多用 500，暗色多用 400。black 为特例：亮底深字、暗底浅字，色块使用 --theme-primary-swatch-black。

样式注入路径

theme/styles/index.css
  → Starlight：src/styles/global.css
  → 书签：src/bookmarks/shared/styles/bookmarks-theme-shared.css

书签另叠 shadcn-theme.css，将 --primary 绑定至当前 Primary。

验证

1. vpr dev，检查文档站与 /bookmarks/nav/。
2. 定制器应反映更新后的 Primary / Neutral 列表（若已修改）。
3. vpr build 通过即可。