必须用完整语法@media (prefers-color-scheme: dark)声明，不可省略@media或括号、冒号、空格；需独立成块、不能嵌入选择器内；正确配合CSS变量定义于:root并在媒体查询中重设，同时注意box-shadow、SVG、渐变等细节适配。
prefers-color-scheme媒体查询怎么写才生效
必须用 @media (prefers-color-scheme: dark) 这种完整语法，漏掉 @media 或括号、冒号、空格任意一处都会让规则完全不触发。它不是 CSS 变量或属性，是媒体查询，不能直接写在选择器里。
常见错误现象：body { color: white } @media (prefers-color-scheme: dark) { body { color: black } } —— 这样写会报 CSS 解析错误，因为 @media 必须独立成块，不能插在声明中间。
- 正确写法：先写默认样式，再用
@media块覆盖深色模式下的部分 - 深色模式下系统返回
dark，浅色模式返回light，还有少数系统可能返回no-preference（需单独处理） - 不能嵌套在
@supports或其他媒体查询里——@media (prefers-color-scheme: dark) and (width >= 768px)是合法的，但@supports (prefers-color-scheme: dark)无效
为什么加了@media却没切换颜色
最常见原因是浏览器未读取系统偏好，或者开发时没刷新页面。Chrome / Firefox / Safari 都支持该特性，但 Electron 或旧版 WebView（如 Android 9 以下）可能不识别。
使用场景：本地开发时，Mac 系统设为深色，但 Chrome 仍走浅色样式？先确认是否启用了「自动跟随系统」——Chrome 设置里要打开「Auto-detect system theme」，否则它会缓存首次启动时的值。
- 测试方法：在 DevTools 的 Rendering 面板中勾选
Emulate CSS media feature prefers-color-scheme，手动切 dark/light - 不要依赖 JS 动态插入
@media规则——CSSOM 插入的媒体查询不会响应系统切换，必须初始加载就存在 - 如果用构建工具（如 Vite、Webpack），确保 CSS 没被提取压缩成单个文件后意外丢弃了媒体查询块（极少见，但 PostCSS 插件误配置可能引发）
变量和颜色怎么配合prefers-color-scheme用更稳
直接在 @media 里重定义 CSS 变量比重复写颜色值更可靠，也方便后续扩展。但要注意变量作用域——:root 下定义的变量会被继承，而媒体查询里修改的是同一份变量。
:root {
--bg: #fff;
--text: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #eaeaea;
}
}
body {
background-color: var(--bg);
color: var(--text);
}
- 避免在媒体查询里写
body { --bg: #1a1a1a }——这样变量只对 body 生效，子元素拿不到 - 不要用
!important覆盖变量值，它会破坏变量链路，导致 JS 无法安全读写 - 如果项目已用 CSS-in-JS（如 styled-components），得靠 JS 监听
window.matchMedia，纯 CSS 方案此时失效
深色模式下图片、阴影、边框容易翻车的地方
很多人只改文字和背景，忘了 box-shadow、border、background-image 这些属性在深色背景下可能完全看不见，或者对比度爆炸。
-
box-shadow: 0 2px 4px rgba(0,0,0,0.1)在深色背景上几乎不可见，应改为rgba(255,255,255,0.08)类似值 - SVG 图标如果 fill 是固定
#000，深色模式下会消失，建议用currentColor或通过@media单独控制 - 渐变背景（如
linear-gradient(to right, #eee, #ddd)）在深色模式下变成灰蒙蒙一片，需要重新设计色值，而不是简单反色 - input:focus 的 outline 默认是蓝色，在深色模式下可能看不清，最好显式设置
outline-color
系统偏好不是开关，是连续信号；用户可能中途切换深浅模式，而页面不会自动重载——所以所有依赖它的样式，都得能响应式更新，不能只靠初始判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
