color-scheme 不能单独实现深色模式切换，它仅声明支持主题类型，需配合 @media (prefers-color-scheme: dark) 修改 :root 变量，并同步更新 color-scheme 属性与 localstorage 才能完整生效。
不能只靠 color-scheme 一键切换深色模式——它只是告诉浏览器“我支持什么”，不触发任何样式变化，也不能响应用户手动切换。
为什么 color-scheme 单独用不了
color-scheme: light dark 只是一个提示声明，作用是让浏览器知道你的页面能适配两种系统主题，从而自动调整原生控件（比如 <input>、<select></select> 的默认背景和文字色）。但它本身不改任何 CSS 规则，也不影响你写的 background-color 或 color 值。
常见错误是把它当开关写在 :root 里，以为加了就能切主题——结果点了按钮没反应，刷新后还是浅色，因为没配套的变量覆盖逻辑。
-
color-scheme必须配合@media (prefers-color-scheme: dark)才能生效于自定义样式 - 它无法读取或写入
localStorage，所以记不住用户偏好 - iOS 13 以下、部分安卓 WebView 完全忽略该声明，纯靠它会丢体验
@media (prefers-color-scheme: dark) 怎么正确配合 :root 变量
核心是：所有颜色值必须从 :root 变量取，媒体查询只负责重设这些变量，不直接写组件样式。
错误写法：
/* ❌ 错！组件级硬编码，媒体查询改不动 */<br>.card { background: #fff; }<br>@media (prefers-color-scheme: dark) {<br> .card { background: #1e1e1e; }<br>}
正确写法：
:root {<br> --bg: #fff;<br> --text: #000;<br>}<br>@media (prefers-color-scheme: dark) {<br> :root {<br> --bg: #121212;<br> --text: #e0e0e0;<br> }<br>}<br>body { background-color: var(--bg); color: var(--text); }
- 变量名要统一、语义清晰（如
--bg-primary、--border-subtle），避免后期维护时猜含义 - 媒体查询块里只改
:root，别嵌套选择器，否则优先级混乱 - 过渡动画要加在使用变量的元素上（如
body { transition: background-color 0.3s; }），不是加在:root上
用户手动切换时，color-scheme 还要不要设
要，但它是辅助项，不是主力。你在 加了 class="dark" 后，应该同步更新 color-scheme 值，否则原生控件可能卡在系统旧状态。
做法很简单：
document.documentElement.setAttribute('color-scheme', isDark ? 'dark' : 'light');
- 这个设置不会触发重绘，只影响后续新渲染的表单控件
- 必须和 class 切换同步执行，否则可能出现“内容已变暗，但输入框还是亮白”的割裂感
- 如果用的是
<meta name="color-scheme" content="light dark">，它只起初始声明作用，运行时无法修改
边框/阴影/图片在深色下失效的典型原因
不是 color-scheme 没用，而是变量值本身不可见。比如：
-
border: 1px solid var(--border)但--border设成#333，在#121212背景上几乎看不出 -
box-shadow: 0 2px 4px var(--shadow)但--shadow是rgba(0,0,0,0.1)，在深色背景上透明度太高 - 图片没加
filter: brightness(0.8)或mix-blend-mode: multiply，导致在深色背景下过曝
检查方式：打开 DevTools → Computed 面板，直接看 border-color 最终计算出的 RGB 值，而不是只盯 Styles 里的 var(--border) 引用。
真正可靠的“一键切换”，是 class 控制变量 + color-scheme 同步原生控件 + localStorage 持久化——三者缺一不可，而 color-scheme 是最容易被当成主力却实际最弱的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
