深色模式一键切换的核心是将所有可变样式值定义在:root的CSS自定义属性中，并通过@media(prefs-color-scheme:dark)或html.dark:class覆盖变量值，而非重写选择器；所有组件样式必须使用var()引用，确保语义统一、继承正确且兼容原生控件。
直接在 :root 里定义变量，别绕弯
深色模式能“一键切换”的核心，就是把所有颜色、阴影、间距等可变值全收进 :root 的 CSS 自定义属性里。不是写两套独立样式表，也不是靠 JS 逐个改元素 style，而是只改一次根变量，整站跟着变。关键在于：所有组件样式都用 var(--bg-color) 这类引用，而不是硬写 #ffffff。
@media (prefers-color-scheme: dark) 覆盖变量，不覆盖选择器
媒体查询不是用来重写 .card { background: #1e293b } 的——那样会重复、难维护、还容易漏。它只干一件事：在系统设为深色时，重新给同一组变量赋值。比如：
/* 默认（浅色） */
:root {
--bg-color: #f8fafc;
--text-primary: #0f172a;
}
<p>/<em> 系统偏好深色时覆盖 </em>/
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #0f172a;
--text-primary: #f1f5f9;
}
}</p>
这样既免 JS，又自动响应系统切换，连 Safari iOS 都支持。
手动切换时加 .dark class，但别覆盖 :root
用户点按钮切主题？没问题，但别用 JS 直接 document.documentElement.style.setProperty('--bg-color', '#0f172a') —— 这会把 @media 的自动逻辑彻底废掉。正确做法是：
- 在 HTML 上加一个
class="dark"（或data-theme="dark"） - 用
html.dark :root或html[data-theme="dark"] :root再次声明变量 - 确保这个 class 规则的优先级 ≥ 媒体查询（比如写在它后面，或加
!important） - 保留媒体查询块不变，让它继续管“系统默认”，class 只管“用户主动”
注意变量作用域和继承链断裂点
CSS 变量是继承的，但一旦某个中间元素显式设置了 --bg-color，子元素就拿不到 :root 的值了。常见坑：
- 第三方 UI 库（如 Element Plus）可能自己设了
:root变量，得在它之后重载 - Shadow DOM 内部不会继承外部
:root变量，需在:host或::slotted里手动传入 - 用
color-scheme: light dark告诉浏览器你支持双模式，能改善原生控件（<input>、<select></select>）渲染
最易被忽略的是：变量名语义要稳定，比如别叫 --light-bg 和 --dark-bg，而统一用 --bg-color —— 切换时才真正是“同一个值的不同状态”，而不是两个平行变量来回显隐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
