color-scheme是浏览器渲染底层开关，仅对未设background/color/border-color的原生控件（如input、select、滚动条）触发系统级自动适配，需配合prefers-color-scheme媒体查询控制自定义样式。
color-scheme 不是装饰性属性，它是浏览器渲染底层逻辑的开关。现代网页重拾 CSS 系统颜色，根本原因不是怀旧，而是它能让 input、textarea、select、滚动条、button 这些原生控件“自动响应”深色模式，无需重写样式、不依赖 JS、不污染组件结构。
系统颜色如何绕过自定义样式劫持
当你给 input 设置了 background: #fff 和 color: #333，它就彻底脱离了系统配色逻辑——哪怕你加了 color-scheme: light dark，也不会变暗。但如果你**完全不设背景和文字色**，只声明 :root { color-scheme: light dark; }，浏览器就会在深色模式下把 input 的默认背景变成深灰、文字变成浅灰、边框变细且带微妙阴影——这些是操作系统级语义，不是 CSS 模拟出来的。
- 必须清空所有显式设置的
background、color、border-color才能触发系统颜色生效 -
color-scheme本身不改变任何元素外观，它只是告诉浏览器：“请按用户当前主题来渲染未被覆盖的系统控件” - Element Plus、Ant Design 等组件库的深色模式支持，底层都依赖这一机制处理原生表单元素
为什么 prefers-color-scheme 媒体查询不能替代 color-scheme
@media (prefers-color-scheme: dark) 是 CSS 规则层的条件判断，它能改你写的样式，但改不了浏览器内置控件的默认行为。比如你在媒体查询里写了 input { background: #1e1e1e; }，这确实能让输入框变黑，但滚动条还是亮色、option 下拉项文字可能糊成一片、progress 轨道颜色不匹配——这些都不是你手动能一一覆盖的。
-
color-scheme影响的是 UA stylesheet（用户代理样式表），属于渲染引擎层面 -
prefers-color-scheme只影响 author stylesheet（作者样式表），属于开发者可控层 - 二者配合才是完整方案：用
color-scheme保底原生控件，用媒体查询精细化控制自定义区域
ArkWeb 和 iOS Safari 的特殊表现
在 ArkWeb（鸿蒙 Web 引擎）和较新版本 iOS Safari 中，color-scheme 的作用范围更广：它还能影响 canvas 默认背景、svg 中未填色的图形、甚至某些伪元素的默认填充色。但这也带来一个典型坑点：如果页面局部需要强制浅色（比如一个白底数据卡片），仅靠 color-scheme: light 加在容器上是无效的——它只对子元素中“未设置颜色”的原生控件起效，对 div 或 span 完全无感。
- 不要对非表单/非滚动条元素滥用
color-scheme，它不会改变它们的背景或文字色 - ArkWeb 支持
meta name="color-scheme"全局声明，但该声明一旦写死，就无法被 JS 动态修改 - iOS Safari 对
color-scheme: only dark（仅支持暗色）的支持不稳定，建议始终用light dark双值
真正容易被忽略的，是系统颜色与 CSS 自定义变量之间的边界感：前者管“没被你动过的部分”，后者管“你明确想控制的部分”。混用时若不清除原始样式，就会出现一半自动切换、一半卡死不动的割裂效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
