01 · 主题定制器与用户偏好
Surface 入口
Section titled “Surface 入口”| 页面 | 组件 |
|---|---|
| 博客 / 文档 | 顶栏 ColorThemeSelect |
书签导航 /bookmarks/nav/ | 顶栏 ColorThemePicker |
书签管理 /bookmarks/admin/ | 登录页与顶栏 |
任一 Surface 的修改经 localStorage 同步至同浏览器其它标签页。
- Primary / Neutral / Radius：切换色板与圆角档位。
- 色彩模式：浅色、深色、跟随系统。
- 随机：仅随机 Primary / Neutral / Radius，不改变色彩模式。
- 重置：恢复默认（green / slate / 0.25 / 跟随系统）。
持久化与 DOM 属性
Section titled “持久化与 DOM 属性”浏览器 localStorage（wwlight: 前缀），例如：
wwlight:color-mode— 色彩模式wwlight:color-primary— Primarywwlight:color-neutral— Neutralwwlight:theme-radius— Radius
样式不直接读 localStorage；首屏内联脚本将值写入 <html data-theme="…" data-color-primary="…">，再由 CSS 属性选择器生效，避免 FOUC。
与书签样式的映射
Section titled “与书签样式的映射”书签侧 shadcn 使用 --primary、--background；文档站侧栏使用 Starlight --color-accent-*。两套样式表，同一组 data-*，主色变更在两处同时体现。
逻辑位于 src/theme/lib/，对外 API：import { … } from '@/theme'。
vpr generate:color-themes # color-tokens.css、options.json 等vpr generate:theme-init # scripts/init.inline.js（首屏脚本）默认值定义于 scripts/color-themes.data.mjs（Primary green、Neutral slate、Radius 0.25）。