03 · 色彩模式与同步
| 选项 | 行为 |
|---|---|
| 浅色 | 固定 light |
| 深色 | 固定 dark |
| 跟随系统 | 读取 OS「深色模式」偏好 |
实现：src/theme/lib/color-mode/color-mode.ts，经 @/theme 导出。
首屏与 FOUC
Section titled “首屏与 FOUC”<head> 内联 init.inline.js（vpr generate:theme-init）在 React 与水合前写入 data-theme 及 .dark / .light，避免亮暗闪烁。
书签 entry.astro 注入同一段脚本；与文档站共用 wwlight:color-mode。
View Transition
Section titled “View Transition”定制器切换色彩模式时，在支持且未启用「减少动态效果」的环境下使用 View Transition（点击位置扩散）。
长页面已滚动时，切换前短暂固定滚动位置，避免动画与视口错位（仅用于主题切换；弹层滚动锁定使用书签管理端 admin-dialog-scroll-lock，勿混用 lockDocumentScroll）。
src/theme/lib/site/sync.ts 监听 storage：在标签 A 修改偏好后，标签 B 同站页面更新 DOM。
书签根组件包裹 ThemeProvider 并调用 syncSiteThemeFromStorage()；文档站主要依赖定制器写入 storage 与上述监听。
历史键名（如 starlight-theme、color-primary）首次访问时迁移至 wwlight:*。键表：src/lib/site-storage.keys.mjs；变更后需 vpr generate:theme-init。