color-scheme本身不实现深色模式适配，必须配合<meta name="color-scheme" content="light dark">触发原生控件自动变色，并用@media (prefers-color-scheme: dark)覆盖CSS变量及系统色；缺一不可。
color-scheme 本身不负责“适配深色模式”，它只告诉浏览器：我支持哪些系统级颜色方案。真要让页面在深色系统下看起来像深色模式，color-scheme 必须和 <meta name="color-scheme"> + @media (prefers-color-scheme: dark) 配合使用，缺一不可。
必须加 <meta name="color-scheme" content="light dark">
只在 CSS 里写 html { color-scheme: light dark; } 是无效的——尤其在 iOS Safari 和多数 WebView 中完全不触发原生控件变色。浏览器只认 <head> 里的 <meta> 标签作为“开关”。
- 漏掉这个
<meta>，、 -
content值必须是light dark（空格分隔），不能写成light,dark或"light dark"（引号会失效） - 只声明
dark会导致浅色系统下渲染异常（比如白底黑字消失），所以推荐始终用light dark
@media (prefers-color-scheme: dark) 不能嵌套或条件叠加
这个媒体查询必须是顶层、独立的，否则旧版 Safari（包括 iOS 16.4 之前）会直接忽略整段规则。
- 错误写法：
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } } - 正确写法：直接写
@media (prefers-color-scheme: dark) { :root { --bg: #121212; } } - 变量定义必须有默认值：
:root里先设浅色值（如--bg: #fff），再在媒体查询中覆盖；否则浅色模式下变量未定义，可能回退到浏览器默认（比如全黑）
系统语义色比硬编码十六进制更可靠
color-scheme 激活后，CSS 中可用 Canvas、CanvasText、ButtonFace 等系统语义色，它们会随系统高对比度、深色/浅色设置自动微调，比 #121212 更稳。
立即学习“前端免费学习笔记（深入）”；
-
background-color: Canvas和color: CanvasText可直接用于 body 或表单元素 - 这些语义色不支持透明，
CanvasAlpha无效；需要半透效果得用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或 fallback 到变量 - 内联 SVG 图标不会自动反色，
fill: currentColor或fill: var(--icon-fill)才能响应主题变化
最容易被忽略的是：即使 <meta> 和媒体查询都写了，如果没给 :root 设默认变量值，浅色模式下页面可能一片漆黑或空白——因为变量未定义时，var(--bg) 回退为 unset，最终取浏览器默认背景（可能是黑色）。这问题在开发时容易被深色系统掩盖，上线后浅色用户才暴露。
