用纯 CSS 打造优雅的暗色模式

为什么需要暗色模式

暗色模式不仅是审美选择，更关乎阅读舒适度。在夜间或弱光环境下，柔和的深色背景能显著降低视觉疲劳。

把所有颜色抽象成变量，切换主题时只需替换变量值：

:root {
  --color-bg: #fafaf9;
  --color-text: #1f2937;
}
html[data-theme="dark"] {
  --color-bg: #111827;
  --color-text: #f3f4f6;
}

用 localStorage 保存偏好，并在页面加载前应用，避免"闪白"：

const theme = localStorage.getItem("theme");
if (theme) document.documentElement.dataset.theme = theme;

小提示：还可以通过 prefers-color-scheme 媒体查询尊重系统设置。