用 CSS 变量轻松实现暗色模式

暗色模式几乎成了现代网站的标配。实现它的方法有很多，而最优雅的方案之一，就是使用 CSS 变量：只需要定义一套颜色变量，切换主题时改一行属性即可。

1. 定义主题变量

在 :root 中定义浅色主题，再用 [data-theme="dark"] 覆盖暗色值：

:root {
  --bg: #ffffff;
  --text: #1e2233;
  --muted: #5b6078;
  --border: #e6e8f0;
}

[data-theme="dark"] {
  --bg: #0f1120;
  --text: #eef0ff;
  --muted: #a5abc8;
  --border: #2a2f4e;
}

body {
  background: var(--bg);
  color: var(--text);
}

这样所有使用 var(--xxx) 的地方，都会跟随主题自动变化，完全不需要写两套选择器。

2. 切换与持久化

用一小段 JavaScript 完成切换，并把选择存入 localStorage：

function applyTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

// 优先使用用户上次的选择，否则跟随系统
const saved = localStorage.getItem("theme");
if (saved) {
  applyTheme(saved);
} else if (matchMedia("(prefers-color-scheme: dark)").matches) {
  applyTheme("dark");
}

3. 几点小技巧

• 过渡动画：给 body 加 transition，主题切换更顺滑。
• 系统偏好：用 matchMedia 监听系统主题变化，自动跟随。
• 图片适配：暗色模式下可以给图片加一层半透明遮罩，避免刺眼。
• 兼容性：CSS 变量支持所有现代浏览器，无需担心。

你现在看到的本博客，就是这套方案的实战案例——试试右上角的月亮图标 🌙

总结

CSS 变量的核心价值是单一事实来源：颜色只定义一次，主题切换只改一处，维护成本极低。如果还没用过，强烈建议在下一个项目里试试。