仅加 color-scheme: light dark 不足以实现真正深色模式适配，必须配合 <meta name="color-scheme" content="light dark"> 触发 UA 控件自动适配，并用 @media (prefers-color-scheme: dark) 覆盖 CSS 变量及系统色。
只加 color-scheme: light dark 不足以让页面真正适配深色模式——它只管原生控件，不管你的 CSS 变量、文字或背景色。
为什么写了 color-scheme 但表单还是白的
常见现象：给 html 加了 color-scheme: light dark，但 <input> 在深色系统下仍显示白底黑字，滚动条 thumb 也不变暗。
- 根本原因：浏览器默认认为你“不支持”深色模式，除非你在
<head>里明确声明<meta name="color-scheme" content="light dark">——这是触发 UA 控件自动适配的硬性开关 - 仅靠 CSS 层的
color-scheme声明（如写在:root或html上）无法替代该<meta>标签，尤其在 iOS Safari 和部分 WebView 中会完全失效 -
color-scheme本身不改变你写的background-color或color，它只影响浏览器内置样式：表单边框、<progress>轨道、::-webkit-scrollbar、Canvas/CanvasText等系统语义色
@media (prefers-color-scheme: dark) 必须和 color-scheme 配合用
单独写媒体查询，<input>、<select> 这些元素依然卡在浅色外观，因为它们依赖 UA 渲染逻辑，而该逻辑由 color-scheme 启用。
- 必须同时做两件事：
<meta name="color-scheme" content="light dark">+@media (prefers-color-scheme: dark) { :root { ... } } - 变量定义要完整：
:root中先设浅色默认值（如--bg: #fff），再在媒体查询中覆盖深色值（--bg: #121212），漏掉默认值会导致 light 模式下变量未定义，回退到浏览器默认（可能全白或全黑） - 别把媒体查询嵌套在其他条件里，例如
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }—— 旧版 Safari 直接跳过
系统语义色比十六进制更稳，但不能透明
用 background-color: Canvas 和 color: CanvasText 替代 #121212 或 #ffffff，能随系统高对比度、深色/浅色设置自动微调亮度与饱和度。
立即学习“前端免费学习笔记（深入）”；
-
Canvas等系统色不支持 alpha，写CanvasAlpha无效；需要半透时，得用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或 fallback 到变量 - 内联 SVG 图标不会自动反色，
fill: currentColor或fill: var(--icon-fill)才能响应主题变化；filter: invert(1)会破坏语义、高对比度下不可读 - 滚动条颜色需单独写伪元素规则（如
::-webkit-scrollbar-thumb），且其值也应使用变量或系统色，不能遗漏
最容易被忽略的是：所有使用 CSS 变量的地方都必须加 fallback，比如 background-color: var(--bg, #ffffff)。否则当 JS 动态切换主题、或媒体查询尚未生效时，变量为空，样式直接崩塌。
