如何使用CSS变量（Custom Properties）实现一键切换深色模式？-css教程-PHP中文网

深色模式不能只靠class切换，因会导致样式失控；应使用CSS变量集中管理主题值，并通过:root声明默认值、@media和data-theme覆盖以确保可维护性与兼容性。

如何使用css变量（custom properties）实现一键切换深色模式？

深色模式切换为什么不能只靠 class 切换？

单纯给 body 加 class="dark" 再写一堆 .dark .btn { color: #fff; } 会快速失控：颜色值重复、状态组合爆炸（比如 .dark .btn:hover、.dark .btn:disabled）、主题变量无法复用。CSS 变量能集中管理这些值，且支持动态更新，是真正可维护的解法。

定义和使用 CSS 变量的最小可行结构

必须在 :root 里声明默认值，并在 dark 模式下覆盖——否则 JS 切换时变量未定义会导致回退到浏览器默认色（比如黑色文字配黑色背景）。

:root {
  --text-primary: #333;
  --bg-surface: #fff;
  --border-color: #e0e0e0;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--text-primary: #eee;
--bg-surface: #1a1a1a;
--border-color: #333;
}
}</p><p>body {
color: var(--text-primary);
background-color: var(--bg-surface);
border-color: var(--border-color);
}</p>

:root 是全局作用域，确保所有元素都能访问
不要漏掉 @media (prefers-color-scheme: dark)，它让系统级深色偏好自动生效
变量名用 -- 开头，命名建议语义化（如 --text-primary 而非 --color-1）

用 JavaScript 主动切换主题并持久化

用户点击按钮切换时，不能只改 class，必须同步更新 CSS 变量或触发媒体查询匹配。最稳妥的方式是给 html 元素加 data-theme="dark"，再用 CSS 覆盖变量。

document.documentElement.setAttribute('data-theme', 'dark');

对应 CSS：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

[data-theme='dark'] {
  --text-primary: #eee;
  --bg-surface: #1a1a1a;
  --border-color: #333;
}

优先读取 localStorage 恢复上次选择：localStorage.getItem('theme')
切换时同时写入 localStorage 和设置 data-theme 属性
避免直接操作 style.setProperty() —— 多个变量要逐个设，易遗漏；用属性控制更可靠
注意：如果用户系统是深色模式，但手动切回浅色，需显式清除 data-theme 或设为 light，否则媒体查询会被属性覆盖

为什么 calc() 和 var() 组合容易出错？

想用 CSS 变量做颜色混合或明度调整？别直接 color: calc(var(--text-primary) * 0.8) —— calc() 不支持颜色运算，会直接失效。

颜色计算必须用 hsl() 或 color-mix()（后者兼容性差）
例如调暗文字：color: hsl(0, 0%, calc(100% - 20%)); 配合变量：--text-lightness: 30%; → color: hsl(0, 0%, calc(100% - var(--text-lightness)));
透明度用 rgba() + var() 数字：定义 --alpha: 0.8;，然后 background-color: rgba(0, 0, 0, var(--alpha));
所有非数值变量（如颜色字符串）不能参与 calc()，会整个声明被浏览器忽略