直接用 @media (prefers-color-scheme: dark) 媒体查询响应系统主题，支持 chrome 76+ 等现代浏览器；需配合 no-preference 回退规则，并与 js 主题控制协同：媒体查询管首次加载默认态，js 管后续手动切换，避免冲突。
怎么用 prefers-color-scheme 切换暗黑模式
直接靠 CSS 媒体查询就能响应系统主题，不用 JS 也能自动适配。关键不是“加个 class”，而是监听 prefers-color-scheme 这个媒体特性。
- 只在支持该特性的浏览器生效（Chrome 76+、Firefox 67+、Safari 12.1+，Edge 79+）
- 值只有
light、dark、no-preference三种，别写black或night - 它反映的是操作系统级设置，不是浏览器设置或用户手动点的开关
- 如果用户没设系统偏好，默认是
no-preference，此时多数浏览器按light渲染，但不能假设——得单独写回退规则
/* 默认浅色样式 */
body { background: #fff; color: #333; }
<p>/<em> 暗色模式覆盖 </em>/
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #eee; }
}</p><p>/<em> 回退：当系统未声明偏好时，也走浅色 </em>/
@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
body { background: #fff; color: #333; }
}</p>
为什么不能只靠 @media(prefs-color-scheme: dark) 就完事
因为真实场景里，用户可能手动切换主题，或者系统没配、浏览器不支持、甚至用了旧版 Safari（12.0 不支持该特性）——这时候纯靠媒体查询会彻底失效。
-
prefers-color-scheme是只读信号，无法被 JS 主动触发或模拟 - 用户点了“切换主题”按钮后，页面需要立刻响应，但媒体查询不会重算，除非刷新或系统设置变
- 某些安卓 WebView、微信内置浏览器、旧版 Electron 内核压根不识别这个媒体特性
- 所以必须配合 class 控制（如
html[data-theme="dark"]），媒体查询只做初始自动匹配
如何让 media query 和 JS 主题控制不打架
核心原则：媒体查询负责“首次加载时的默认态”，JS 负责“后续所有主动切换”。两者共存时，用 specificity 和顺序来隔离。
- 把媒体查询样式写在前面，JS 控制的 class 样式写在后面，确保 class 能覆盖 media query
- 不要给 class 加
!important，改用更具体的选择器，比如html[data-theme="dark"] body而非单纯[data-theme="dark"] - 初始化 JS 时，先读
window.matchMedia('(prefers-color-scheme: dark)').matches，再决定是否加data-theme="dark" - 监听
matchMedia变化，但仅用于“系统主题变了且用户没手动干预过”的场景——得记一个 flag 表示用户是否已手动切换
暗黑模式下哪些 CSS 属性容易翻车
不是所有颜色都能靠 media query 一键反转。有些属性天生不继承、不响应、或有隐式默认值。
-
border-color默认是currentcolor，而color在暗色下变浅了，border 可能突然看不见 -
box-shadow的rgba(0,0,0,0.1)在深背景上几乎无效，得换rgba(255,255,255,0.1)或改用inset -
background-image: linear-gradient()里的颜色值不会自动变，得单独重写整条声明 -
filter: drop-shadow()同样不随主题变，且和box-shadow行为不一致，建议统一用后者 - SVG 内联
fill/stroke不受 CSS 变量影响，得用currentColor或外部 CSS 控制
实际项目里最常漏掉的，是表单控件的默认样式（input、textarea、select）和第三方组件库的暗色适配逻辑——它们往往自带内联样式或 shadow DOM，媒体查询进不去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
