必须添加并写在:root上，才能启用浏览器对等原生控件的系统语义色渲染；它不覆盖自定义background-color等样式，仅提供默认值。
仅写 color-scheme: light dark 不会改变表单控件颜色——必须配 <meta name="color-scheme">，且只影响原生渲染逻辑，不覆盖你写的 background-color 或 border-color。
为什么写了 color-scheme 但 <input> 还是白底黑字？
根本不是 CSS 没生效，而是浏览器压根没启动深色模式的 UA 渲染逻辑。常见断点：
-
<meta name="color-scheme" content="light dark">缺失或写错位置（必须在里，紧接<meta charset>后） -
color-scheme写在了body或form上——它只认:root或html - 给
input显式写了background-color: #fff，直接屏蔽了系统语义色（如Canvas） - iOS Safari 13 以下、旧版 Android WebView 完全忽略该特性
如何让 <input>、<select></select> 等控件真正响应系统主题？
分两步走：先让浏览器“画对”，再让你的样式“跟上”。
- 在
加：<meta name="color-scheme" content="light dark"> - CSS 中写：
:root { color-scheme: light dark; }（别写html，部分安卓 WebView 对:root更敏感） - 清空所有自定义背景/边框色，测试原生表现是否已切换（比如深色系统下
<input>边框变灰、文字变浅） - 若需微调，用系统关键词替代硬编码：
background-color: Canvas;、color: CanvasText;、border-color: ButtonBorder;
accent-color 和 color-scheme 是什么关系？
accent-color 管复选框/单选框的主色调，color-scheme 管它们整体的明暗基底——两者可共存，但作用域不同。
-
accent-color: #007bff在深色模式下仍会显示蓝色，但控件背景、文字色由color-scheme+ 系统语义色决定 - 不支持
accent-color的老浏览器（如 IE、部分 Android WebView），得靠appearance: none+ 自绘 - 别指望
color-scheme改变accent-color值本身；如需品牌色随主题变，得用媒体查询：@media (prefers-color-scheme: dark) { input[type="checkbox"] { accent-color: #4a90e2; } }
最容易被忽略的是：系统语义色（Canvas、ButtonFace 等）不支持透明，也无 alpha 变体；想加半透效果，得用 color-mix(in srgb, CanvasText 70%, transparent) 或 fallback 到变量。而且，一旦你给表单控件加了 !important 或内联样式，color-scheme 就彻底失效——它只提供默认值，从不强制覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
