color-scheme不是页面变暗开关，而是授权浏览器用系统语义色（如CanvasText、ButtonFace）渲染input、select、滚动条等原生控件；它与prefers-color-scheme分工明确：前者管浏览器绘制的控件，后者管开发者编写的CSS规则。
color-scheme 不是让页面变暗的开关，而是浏览器渲染原生控件的授权凭证——没它，<input>、<select></select>、滚动条、<progress></progress> 在深色系统下永远白底灰边。
color-scheme 和 @media (prefers-color-scheme: dark) 分工不同
-
@media (prefers-color-scheme: dark)只改你写的 CSS：比如body { background: #121212; }，但它对<input>的边框色、<meter></meter>轨道、::-webkit-scrollbar-thumb完全无效 -
color-scheme: light dark是告诉浏览器：“请用系统语义色（如CanvasText、ButtonFace）重绘这些原生元素”，前提是它们没被你显式覆盖 - 混用但不协同 → 界面割裂：文字变黑了，
<input type="date">弹窗还是刺眼白面板
为什么只写 CSS color-scheme 常常无效
-
color-scheme只在“未设颜色”的前提下起作用：一旦写了input { background-color: white; border-color: #d1d5db; }（Tailwind、Normalize.css 都这么干），它就彻底退出 - 滚动条、
<meter></meter>等依赖父级（通常是html或:root）声明，子元素单独设color-scheme基本无效 - iOS Safari 和多数安卓 WebView（如 Samsung Internet）会忽略 CSS 层的
color-scheme，必须靠<meta name="color-scheme" content="light dark">触发
必须同时声明 <meta> 和 CSS 才能兜底
-
<meta name="color-scheme" content="light dark">必须静态写在最上方，JS 动态插入无效 -
:root { color-scheme: light dark; }是现代浏览器主路径，但 Firefox 对<select></select>下拉箭头支持不全，<meta>是必要补充 - 二者缺一不可：只靠
<meta>，iOS 13.4 以下 Safari 不识别；只靠 CSS，旧版 Chrome Custom Tabs 直接无视
系统语义色才是真正的适配关键
- 即使
color-scheme生效，如果你写input { background: #fff; }，它永远是白的 - 正确做法是清空显式颜色声明，改用系统色：
background-color: Canvas;、color: CanvasText;、border-color: ButtonBorder; - 注意：
CanvasAlpha不存在，系统色不支持透明；需要半透效果得用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或 fallback 到变量
真正容易被忽略的不是怎么写，而是“先清空再授权”——删掉 reset 里那几行 background 和 border-color，color-scheme 才有发挥余地。
