静态站也能有暗色模式
前端 / 主题
这是一个 output: "export" 的纯静态站，没有 Server 可以读 cookie。暗色模式仍然可以做得很干净。
核心思路
- 在
:root与[data-theme="dark"]里维护同一套 CSS 变量名 localStorage记住用户选择- 在
<head>里塞一小段阻塞脚本，在 React hydrate 前就写好data-theme，避免闪白
为什么不用 prefers-color-scheme 单独驱动
系统偏好适合作为默认值，但不适合作为唯一真相。用户手动切到亮色后刷新，仍应保持亮色——这只能靠本地存储。
切换按钮的细节
图标用 Sun / Moon 即可，但 aria-label 要说清楚「切换到暗色/亮色」。色弱场景下，不能只靠图标形状传递状态。
和设计 Token 的关系
如果颜色散落在组件 class 里，暗色模式几乎无法维护。先收拢 Token，再做主题，顺序不能反。
静态站不意味着体验要打折。把「主题」当成数据，而不是当成两套页面，事情会简单很多。