用 CSS 变量做一个安静的深色模式

深色模式不一定要做成一个显眼的功能。我的做法是：默认跟随系统，只给愿意手动切换的人留一个小按钮，选择记在浏览器本地。

这样做的好处是，第一次来的人不需要做任何设置，页面就会跟他当前的习惯一致；只有想固定下来的人，才需要按一下按钮。按钮的说明文字也会随当前主题变化，用键盘同样可以操作。

颜色交给变量

先把颜色收进几个 CSS 变量里，浅色和深色只换值，不重写布局：

:root {
  --bg: #ffffff;
  --text: #191b1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161817;
    --text: #e8eae7;
  }
}

页面上的颜色都引用 var(--bg) 这样的变量。这样主题切换时，文字、背景和边框会一起变化，不用维护两份样式。

记住手动选择

在 <head> 里先读一次 localStorage，把 data-theme 写到 <html> 上，避免页面先闪一下白底。按钮只做一件事：在 light 和 dark 之间切换，并把结果写回本地存储。没有这一步，用户每次打开页面都要重新选一次。

少一点存在感

按钮放在页头右侧，只有一个图标的大小。没有动画，也没有弹窗。它应该像一个开关，而不是一个需要被注意的功能。如果浏览器不支持 prefers-color-scheme，页面就留在浅色，不影响阅读。