color-scheme 声明必须配合 <meta name="color-scheme" content="light dark"> 才生效，仅写 CSS 不触发深色表单控件；该 meta 必须静态置于 head 中，且 color-scheme 需写在 html 元素上，二者协同才能启用 UA 自动适配逻辑。
color-scheme 声明必须配合 标签才生效
只在 html 或 :root 上写 color-scheme: light dark，iOS Safari 和多数 WebView 里完全不触发深色表单控件——浏览器压根不认你支持深色模式。硬性前提是：<meta name="color-scheme" content="light dark"> 必须放在 <head> 里，且不能动态插入。
- 这个
<meta>是 UA 渲染逻辑的“开关”，color-schemeCSS 属性只是“说明书” - 漏掉它，
<input>、<select>、<progress>、滚动条 thumb 等全部卡在浅色外观 - 不要写成
content="dark"或content="auto"，只接受light、dark或空格分隔的组合
@media (prefers-color-scheme: dark) 不能单独驱动原生控件
@media (prefers-color-scheme: dark) 只改你自己写的 CSS，对 <input> 背景、::-webkit-scrollbar 颜色、CanvasText 等系统语义色毫无影响。它们只响应 color-scheme + <meta> 组合启用的 UA 自动适配逻辑。
- 写了媒体查询但表单还是白底？不是媒体查询失效，是你没开 UA 适配开关
-
color-scheme不会改变你写的background-color或color，它只让浏览器用Canvas、CanvasText这类系统色重绘原生元素 - 想手动控制滚动条颜色？仍需额外写
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }，且变量值也得在媒体查询里覆盖
color-scheme 和 prefers-color-scheme 必须协同使用
二者分工明确：color-scheme 告诉浏览器“我能适配”，@media (prefers-color-scheme: dark) 告诉浏览器“我现在要怎么适配”。缺一不可，且顺序不能颠倒。
- 先在
:root定义浅色默认变量（如--bg: #fff），再在媒体查询中覆盖深色值（--bg: #121212）；漏掉默认值，浅色系统下变量为unset，可能白屏或黑屏 -
color-scheme: light dark要写在html元素上，不是body或某个 class，否则部分安卓 WebView 不识别 - SVG 图标不会自动反色，
fill必须显式绑定变量（fill: var(--icon-fill)）或用currentColor，不能靠继承
系统语义色比十六进制更可靠，但有使用限制
用 background-color: Canvas 替代 #121212，能随系统高对比度、深色/浅色设置自动微调，但要注意它不支持透明。
立即学习“前端免费学习笔记（深入）”；
-
CanvasAlpha无效，系统色无 alpha 通道；需要半透效果，得用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或 fallback 到变量 - 所有用到变量的地方必须加 fallback，比如
background-color: var(--bg, #fff)，否则变量未定义时会回退为unset - 别把媒体查询嵌套在其他查询里（如
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }），旧版 Safari 直接跳过整块
color-scheme 声明本身不触发任何样式变化，它只是让浏览器知道“你可以交给我来适配”，而真正决定页面长什么样的，是你是否完整提供了两套变量、是否正确声明了 <meta>、以及是否覆盖了所有非变量元素（表单、SVG、滚动条）。 
