HTML/CSS 暗黑模式切换实战详解（附代码示例）

无论你是刚入门HTML/CSS，还是想温故知新，关于暗黑模式切换的这篇梳理都值得花几分钟读完。内容不长，但都是干货。

第一步：先搞懂暗黑模式切换是什么

把暗黑模式切换的注意事项写进团队的 Code Review 清单，从源头减少问题。

注意暗黑模式切换的字符编码问题，中文场景下这是个高频坑。

第二步：实战暗黑模式切换

暗黑模式切换：

:root {
  --bg: #fff;
  --text: #333;
}
[data-theme='dark'] {
  --bg: #1a1a1a;
  --text: #e5e5e5;
}
body {
  background: var(--bg);
  color: var(--text);
  transition: background .3s;
}

/* 跟随系统偏好 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --bg: #1a1a1a; --text: #e5e5e5; }
}
/* JS 切换：document.documentElement.dataset.theme = 'dark' */

第三步：完善细节

• 配置文件不要用记事本编辑，编码问题会让你怀疑人生。
• 别忽略内存泄漏，长跑服务的内存曲线要定期看一眼。
• 遇到问题先看日志，日志看不懂再把关键报错贴到搜索引擎，命中率很高。

收尾

HTML/CSS开发的进阶之路，就是由一个个像暗黑模式切换这样的知识点铺成的。走好每一步，时间会给你答案。

遇见问题加 QQ23979811 协助处理