color-scheme 声明文档支持的配色模式而非切换颜色，必须写在 :root 或 html 上且值为“light dark”以启用原生控件自动适配；需与 prefers-color-scheme 媒体查询协作使用，并配合 light-dark() 函数（需兼容性检测）实现双模式样式。
color-scheme 本身不切换颜色，只告诉浏览器“我支持什么模式”
color-scheme 是一个声明性 CSS 属性，不是控制逻辑的开关。它只做一件事：向浏览器通告当前文档或元素“能正确渲染 light 和/或 dark 主题”。浏览器拿到这个信号后，才会把原生控件（<input>、<select></select>、滚动条、焦点环、<button></button> 边框等）自动映射到系统语义色（如 Canvas、CanvasText）。不加这句，哪怕你用 @media (prefers-color-scheme: dark) 改了背景和文字，输入框仍可能在暗色系统下显示白底+浅灰边框——用户一眼就能看出违和。
必须写在 :root 或 html 上，且值要完整
只写 color-scheme: dark 是无效的。浏览器要求显式声明支持的全部模式：
-
color-scheme: light dark✅ 正确：明确告知双模式兼容 -
color-scheme: dark❌ 大部分浏览器忽略，原生控件不响应 -
color-scheme: light❌ 强制禁用暗色适配，即使系统开深色也无效
推荐统一写在 :root 或 html 选择器里，避免分散：
:root {
color-scheme: light dark;
}
不要写在 body 或组件内部——它的作用域是整个渲染树根节点，子元素无法覆盖该声明。
立即学习“前端免费学习笔记（深入）”；
和 prefers-color-scheme 媒体查询不是替代关系，而是协作关系
color-scheme 和 @media (prefers-color-scheme: dark) 各司其职：
-
color-scheme→ 让浏览器知道“我能画对”，触发原生控件自动变色 -
@media (prefers-color-scheme: dark)→ 让你定义“我自己的颜色怎么变”，控制自定义样式
常见错误是只做后者、漏掉前者，结果表单控件始终突兀。二者必须共存。另外注意：color-scheme 不影响你写的 background-color 或 color 值，它只接管浏览器默认样式层。如果你给 input 显式写了 border: 1px solid #ccc，那 color-scheme 就完全失效了——得改成 border-color: CanvasText 或用变量间接引用。
light-dark() 函数让 color-scheme 真正落地，但需谨慎兼容
有了 color-scheme: light dark，再配合 light-dark()，就能一行定义双模式颜色：
:root {
color-scheme: light dark;
--text-primary: light-dark(#1a1a1a, #e0e0e0);
--bg-primary: light-dark(#ffffff, #121212);
}
这样比重复写两遍 @media 更简洁，且变量可复用。但注意：light-dark() 是 2024 年新增特性，目前仅 Chrome 125+、Safari 17.4+、Firefox 126+ 支持。如果项目需兼容旧版 Chrome（比如企业内网环境），仍得 fallback 到传统媒体查询写法。上线前务必用 @supports (light-dark: normal, normal) 包一层做检测。
最容易被忽略的是：哪怕用了 light-dark()，color-scheme 这行依然不能省——它是启用该函数的前提条件。没有它，light-dark() 会退化为第一个参数（即浅色值），暗色系统下照样失效。
