@media (prefers-color-scheme: dark) 未生效主因是css层叠规则：媒体查询不提升优先级，需确保深色样式写在浅色之后；:root必须先明确定义所有变量（以浅色为基准），深色块仅覆盖值；且须配合js持久化与color-scheme声明。
为什么写了@media (prefers-color-scheme: dark)却没生效
不是媒体查询没触发，而是 CSS 层叠规则在“默默执行”——@media块本身不提升优先级，只靠声明顺序覆盖。常见翻车点有三个：
• :root里没先定义浅色默认值，深色块里直接赋值，变量根本不存在
• 深色规则写在浅色样式之前，被后面无条件的:root覆盖
• 嵌套写法如@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }，旧版 Safari（≤13.3）完全不识别
:root变量必须怎么初始化才不崩
所有主题变量必须在:root中**明确定义一次**，且以浅色为基准；深色块里只改值，不新增变量名。
错例：:root { --color-bg: #fff; } 然后单独写 @media (prefers-color-scheme: dark) { :root { --color-bg: #121212; } } —— iOS 13.3 以下 Safari 可能忽略后者。
正例：把浅色和深色变量都写进:root块，再用媒体查询整体覆盖，且深色块必须放在所有默认样式之后：
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-border: #e5e7eb;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #141414;
--color-text: #f0f0f0;
--color-border: #333333;
}
}
漏定义 = 翻车：比如button { background: var(--btn-primary-bg, #007bff); }，而深色下--btn-primary-bg未定义，就会回退到亮蓝色，在深灰背景上刺眼。
表单、滚动条、SVG这些“隐形元素”怎么一起切
它们不读取 CSS 变量，也不响应background/color的间接变化，必须显式重置：
• 给:root或html加color-scheme: light dark;，这是通知浏览器“我支持双主题”，让原生控件自动适配
• input、select、textarea需单独声明background、border、color
• SVG 的fill和stroke必须写成fill: var(--icon-primary);，不能靠currentColor或继承
• 滚动条要单独声明：::-webkit-scrollbar-track { background: var(--color-bg); }
为什么不能只靠 prefers-color-scheme 就完事
它只响应系统设置，无法保存用户手动选择，也不能触发localStorage持久化。
• 用户点“切暗色”时，@media (prefers-color-scheme: dark)不会重新匹配
• 刷新页面后，若没 JS 同步，会退回系统偏好，而非用户上次选的主题
• 更关键的是：系统设为no-preference时，若变量没在:root初始化，就会继承浏览器默认值（比如canvas色可能意外变白）
所以实际方案必须是：CSS 媒体查询兜底 + JS 读取localStorage覆盖 + 监听window.matchMedia做动态响应，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
