深色模式不是加个 filter 就完了

深色模式的核心不是"把白底换成黑底"，而是重建一套光的逻辑。

用变量说话

先把所有颜色抽成 CSS 变量，主题切换就只是换一组变量的事：

[data-theme="dark"] {
  --bg: #0a0f1e;
  --ink: #e9edf6;
  --glass: rgba(22, 30, 55, .55);
}
[data-theme="light"] {
  --bg: #f6f2ea;
  --ink: #2b2a33;
  --glass: rgba(255, 255, 255, .62);
}

三个容易踩的坑

对比度陷阱：深色底上的正文别用纯白，#e9edf6 这种偏冷的白更护眼
阴影失效：深色模式里黑色阴影看不见，要靠发光的边框和亮色光斑来分层
毛玻璃不是万能的：backdrop-filter 需要背后有内容才有效果，底下是纯色时毛玻璃就"死"了

毛玻璃的配方

成分	用量
`background`	半透明色（透明度 0.5~0.8）
`backdrop-filter`	`blur(20px) saturate(1.4)`
`border`	1px 白色 10% 透明度
背景	必须有渐变光斑或图片

记住用户的偏好

切换按钮只是入口，localStorage 才是记忆：

localStorage.setItem('sgj-theme', next);

下次进站先读一遍，用户就不会每次都重新选了。尊重用户的选择，是最基本的礼貌。