规格说明 · SPEC

示例:给博客加暗色模式

spec showcase-001·rev 1·3 决策 · 1 待拍板·2 知情·4 验收点

需要你决策

D-3待拍板

是否提供「亮 / 暗 / 自动」三档,而非仅亮暗两档?

  • 仅亮/暗两档
  • 亮/暗/自动三档

暂定待你拍板,倾向三档

依据三档更灵活但多一档 UI 与状态。

你需要知道

!

切换瞬间可能首屏白闪(FOUC):须在 <head> 内联脚本先读存储打 class,否则暗色用户首屏会闪一下亮色。

i

暗色仅覆盖博客正文与导航;第三方评论 iframe 等嵌入内容不受本主题控制。

01目标

用户可一键切换明/暗,刷新后保持。

03主流程

  1. 点击切换按钮
  2. 主题即时切换
  3. 选择写入 localStorage
  4. 下次访问读取并应用

细节(默认折叠,按需展开)

概述

为博客增加可切换的暗色模式,记住用户选择。

已决策 2
D-1已定

首次访问、无存储时主题默认值?

  • 默认亮色
  • 跟随系统 prefers-color-scheme

拍板跟随系统 prefers-color-scheme

依据尊重系统设置、减少误差。

D-2已定

用户的主题选择存哪里?

  • localStorage
  • cookie
  • 账户后端

拍板localStorage(纯前端、无需登录)

非目标

不做跟随系统时间自动切换。

存储
key
themelight | dark
验收点 4
must 3should 1could 0
  • AC-1must

    页面有可见的明/暗切换控件

  • AC-2must

    切换后主题即时生效,无需刷新

  • AC-3must

    刷新后保留上次选择

  • AC-4should

    未设置过时默认明色