直接用@media (prefers-color-scheme: dark)覆盖:root变量即可兼容，但必须满足三个硬性条件：变量有默认值、媒体查询在css文件末尾、color-scheme: light dark声明到位，缺一不可；否则深色系统下仍白底黑字，主因是规则顺序错、变量未初始化或缺失meta标签触发原生控件适配。
直接用 @media (prefers-color-scheme: dark) 覆盖 :root 变量就能兼容，但必须满足三个硬性条件：变量有默认值、媒体查询在 CSS 文件末尾、color-scheme: light dark 声明到位，缺一不可。
为什么写了 prefers-color-scheme 却没切换
常见现象是页面在深色系统下仍白底黑字，根本原因不是语法错，而是加载顺序或声明缺失：
-
@media (prefers-color-scheme: dark)规则写在浅色样式之前——CSS 按顺序覆盖，后写的无条件规则会压掉它 - 变量只在媒体查询里定义，比如
:root { --bg: #fff; }缺失，导致浅色模式下var(--bg)未定义，回退到浏览器默认（可能全黑） -
<meta name="color-scheme" content="light dark">没加在里——<input>、<select></select>、滚动条等原生控件不会自动变暗 - 把媒体查询嵌套在其他条件里，例如
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }，旧版 Safari 直接跳过整个块
color-scheme: light dark 是做什么的
它不改你的 background-color 或 color，只告诉浏览器“我支持双模式”，从而触发 UA 自动适配原生控件：
- 加在
:root或html上只是声明，真正生效必须配合<meta name="color-scheme" content="light dark"> - 没有它，
<input>在深色系统下仍是白底黑字，::-webkit-scrollbar-thumb保持亮色，<canvas></canvas>边框也不响应 - 它不影响自定义样式，所以
color: CanvasText这类系统语义色才需要它来激活上下文
变量定义和使用怎么不出错
所有主题相关颜色必须走变量，且变量必须分层、带语义、有 fallback：
- 基础变量（如
--color-bg-primary、--color-text-primary）定义在:root，浅色为默认值 - 组件内不要重定义同名变量，比如
.card { --color-bg-primary: #fff; }—— 这会让媒体查询里的:root覆盖失效 - 使用时必须带 fallback：
background-color: var(--color-bg-primary, #ffffff);，否则变量未定义时样式崩塌 - 避免用
rgba(0,0,0,0.1)这类“默认黑透明”——深色下它会变亮突兀，应改用color-mix(in srgb, CanvasText 70%, transparent)或变量控制
哪些地方最容易被忽略
不是颜色变了就完事，图标、阴影、边框、表单控件这些“隐形元素”必须显式处理：
-
<svg></svg>的fill和stroke不继承 CSS 变量，得写成fill: var(--icon-fill)或fill: currentColor - 深色模式下阴影（
box-shadow）几乎不可见，应改用border或outline表达层级，或调低 alpha 值 -
::-webkit-scrollbar伪元素需单独写规则，且其颜色也应来自变量或Canvas系统色 - 图片本身不会反色，
<img>需搭配picture+source media="(prefers-color-scheme: dark)"切换资源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
