color-scheme必须写在:root或html上，配合才能生效，仅影响未显式设色的原生控件，与@media (prefers-color-scheme)并行协作。
color-scheme声明必须写在:root或html上，不能局部生效
color-scheme不是普通CSS属性，它只在:root或html选择器上起作用。写在.card、section或任何子元素里都无效——浏览器直接忽略。它的作用是向渲染引擎申明“本页支持双主题”，从而解锁系统控件的自动适配逻辑。
常见错误包括：
- 把
color-scheme: light dark写在input规则里，以为能单独控制表单 - 用
[data-theme="dark"] { color-scheme: dark }试图条件触发——不合法，语法被丢弃 - 只写
color-scheme: dark，漏掉light，导致部分安卓 WebView 强制 fallback 到浅色
必须配合才能触发UA控件自动变暗
仅靠CSS层的color-scheme: light dark，<input>、<select></select>、滚动条 thumb、<progress></progress>轨道等原生控件在iOS Safari和多数WebView中仍保持亮色外观。根本原因是：浏览器默认认为你“未声明支持”，除非你在里加这行：
<meta name="color-scheme" content="light dark">
这个<meta>是硬性开关，不可省略。它告诉用户代理（UA）：“请按系统偏好渲染未被显式覆盖的控件”。没有它，color-scheme在移动端大概率失效。
注意：
- 不能写成
content="dark"，必须是light dark（顺序无关，但两个值都要有） - 不能动态插入，必须在HTML初始加载时存在
- 它不影响你的
background-color或color，只影响UA stylesheet中那些你没重写的部分
写了color-scheme但控件还是白底？检查是否覆盖了系统色
color-scheme只对“未设置background、color、border-color”的原生控件生效。一旦你给input写了background: #fff，它就彻底脱离系统配色逻辑——深色模式下依然白底黑字。
要让它响应主题，必须清空这些显式声明：
- 删掉所有针对
input、textarea、select、button的background/color样式 - 保留
border或padding等非颜色属性没问题 - 如果需要微调，改用系统语义色：
background-color: Canvas、color: CanvasText
系统语义色不会透明，CanvasAlpha无效；需要半透请用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或变量 fallback。
@media (prefers-color-scheme: dark)和color-scheme是正交关系，缺一不可
@media (prefers-color-scheme: dark)控制你写的CSS变量和自定义区域；color-scheme控制浏览器内置控件的默认外观。两者不替代，也不嵌套——它们是并行的两层。
典型错误组合：
- 只写媒体查询，不声明
color-scheme→ 滚动条、option下拉项、焦点环卡在亮色 - 只写
color-scheme，不写媒体查询 → 自定义背景、文字、卡片边框全不切换 - 把媒体查询嵌套在
@media (max-width: 768px)里 → 旧版Safari直接跳过整个块
正确姿势是分开写、都写全：
:root { --bg: #fff; --text: #333; color-scheme: light dark; }<br>@media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e0e0e0; } }
最易被忽略的细节：SVG图标默认不反色，fill: currentColor或fill: var(--icon-fill)才能响应；filter: invert(1)会破坏高对比度可访问性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
