color-scheme 不是让页面变暗的开关，而是授权浏览器用系统原生深色样式渲染表单控件、滚动条等内置元素；它与 prefers-color-scheme 分工明确：前者管浏览器绘制的控件，后者管开发者编写的 CSS 规则。
color-scheme 不是“让页面变暗”的开关，而是告诉浏览器：“我允许你用系统原生深色样式渲染 input、select、滚动条这些控件”。没有它，哪怕系统开了深色模式，表单控件还是白底灰边——这是最常被忽略的断裂点。
color-scheme 和 prefers-color-scheme 的分工必须分清
前者管浏览器画的，后者管你写的。混淆会导致界面割裂：
-
prefers-color-scheme: dark只会触发你 CSS 里写的规则（比如body { background: #121212; }），但它对<input>的边框色、<progress></progress>的轨道色、滚动条颜色完全没影响 -
color-scheme: light dark才真正授权浏览器：当系统是 dark 时，用 CanvasText 渲染文字、用 ButtonFace 渲染按钮背景、用 ScrollbarTrackColor 渲染滚动条轨道 - 只写媒体查询不写
color-scheme→ 深色背景下，<input type="date">仍弹出刺眼白面板；只写color-scheme不写媒体查询 → 文字和 div 还是浅色，整体不协调
为什么单独给 input 写 color-scheme 常常无效
不是属性没生效，而是它根本没机会起作用：
- 现代 reset CSS 或框架（如 Tailwind base）几乎都显式设置了
input { background-color: white; border-color: #d1d5db; }，直接覆盖了浏览器原生深色样式 -
color-scheme只在“未指定颜色”的前提下才介入；一旦写了background、border-color、color，它就彻底退出 - 滚动条、
<meter></meter>、<progress></progress>等依赖父级（通常是html或:root）的声明，子元素单独设color-scheme基本无效
必须同时声明 meta + CSS 才能覆盖安卓旧 WebView
部分安卓浏览器（如 Samsung Internet、旧版 Chrome Custom Tabs）会忽略 CSS 中的 color-scheme，但认 <meta> 标签：
- 在
里加<meta name="color-scheme" content="light dark">是必要兜底 - CSS 里仍要写
:root { color-scheme: light dark; }—— Safari 17.4+、Chrome 120+ 主要靠这个 - 两者缺一不可：只靠 meta，iOS 13.4 以下 Safari 不支持；只靠 CSS，安卓某些 WebView 直接无视
真正容易被忽略的是系统颜色关键词的使用
就算 color-scheme 生效了，如果你写 input { background: #fff; }，那它永远是白的。要让它随系统切换，得用语义化系统色：
- 用
background: Canvas;代替background: #ffffff; - 用
color: CanvasText;代替color: #000000; - 用
border-color: ButtonBorder;代替硬编码十六进制值 - 这些关键词会随
color-scheme自动映射到当前系统配色方案下的真实值，且在不支持color-scheme的老浏览器里降级为合理默认值
最常翻车的地方不是不会写 @media (prefers-color-scheme: dark)，而是忘了加 <meta name="color-scheme">、忘了删掉重置 CSS 里对表单控件的硬编码颜色、以及误以为 color-scheme: dark 能强制改变自己写的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
