04 · 双 Surface 集成

同一套用户偏好，两个集成面：Starlight 文档站 与 书签 React 应用。面板共用 ThemeCustomizerPanel，经 variant 区分样式。

对照

	Starlight 文档站	书签 / 管理端
触发器	Astro TriggerButton + React ThemeCustomizerPopover	React ColorThemePicker
色彩模式	脚本 + storage，无 ThemeProvider	根组件 ThemeProvider
面板	variant="starlight"，部分边框用 Starlight 灰阶变量	variant="bookmarks"，shadcn 语义色

Starlight 触发器拆分

顶栏以 Astro 为主；若触发器整体为 React，水合前后易出现位置或文案不一致。因此：

1. TriggerButton.astro 输出静态 HTML（data-theme-customizer-trigger）
2. ThemeCustomizerPopover 挂载后绑定点击并锚定至该节点

书签页为纯 React 树，可直接使用 ColorThemePicker。

样式入口

• 文档站：src/styles/global.css → @/theme/styles/index.css
• 书签：bookmarks-theme-shared.css → 同上 + 书签组件样式

Token 维护集中在 src/theme/styles/ 与生成脚本，无需分别维护两套业务色板。

Hero 随机主题

首页 Hero「随机主题」仅随机 Primary / Neutral / Radius，不改变色彩模式（HeroRandomThemeButton）。