规格说明 · SPEC
示例:给博客加暗色模式
◇需要你决策
D-3待拍板
是否提供「亮 / 暗 / 自动」三档,而非仅亮暗两档?
- 仅亮/暗两档
- 亮/暗/自动三档
暂定待你拍板,倾向三档
依据三档更灵活但多一档 UI 与状态。
▲你需要知道
!
切换瞬间可能首屏白闪(FOUC):须在 <head> 内联脚本先读存储打 class,否则暗色用户首屏会闪一下亮色。
i
暗色仅覆盖博客正文与导航;第三方评论 iframe 等嵌入内容不受本主题控制。
01目标
用户可一键切换明/暗,刷新后保持。
03主流程
- 点击切换按钮
- 主题即时切换
- 选择写入 localStorage
- 下次访问读取并应用
细节(默认折叠,按需展开)
概述
为博客增加可切换的暗色模式,记住用户选择。
已决策 2
D-1已定
首次访问、无存储时主题默认值?
- 默认亮色
- 跟随系统 prefers-color-scheme
拍板跟随系统 prefers-color-scheme
依据尊重系统设置、减少误差。
D-2已定
用户的主题选择存哪里?
- localStorage
- cookie
- 账户后端
拍板localStorage(纯前端、无需登录)
非目标
不做跟随系统时间自动切换。
存储
| key | 值 |
| theme | light | dark |
验收点 4
must 3should 1could 0
- AC-1must
页面有可见的明/暗切换控件
- AC-2must
切换后主题即时生效,无需刷新
- AC-3must
刷新后保留上次选择
- AC-4should
未设置过时默认明色