color-scheme不能替代CSS变量或媒体查询，它仅控制原生控件（如input、select、滚动条、button边框）的默认系统色渲染，必须配合声明和@media (prefers-color-scheme)才能完整生效。
color-scheme 不能替代 CSS 变量或媒体查询，它只影响浏览器原生控件（如 <input>、<select></select>、滚动条、<button></button> 边框）的默认渲染色，且必须配合系统偏好才能生效——单独设置不会触发任何样式切换。
为什么 color-scheme: light dark 写了却没反应
常见现象：在 :root 或 html 上加了 color-scheme: light dark，但输入框还是白底黑字，滚动条颜色没变。
- 浏览器未识别该声明：iOS 13 以下、Android WebView（尤其旧版 Chrome Custom Tabs）完全忽略
color-scheme - 声明位置错误：必须写在 CSS 文件或
<style></style>标签中，不能靠 JS 动态注入document.styleSheets添加 - 缺少配套
<meta name="color-scheme">：部分安卓浏览器（如 Samsung Internet）需该 meta 才启用基础适配 - 自定义样式覆盖了系统行为：比如给
input显式写了background-color: #fff，就会压过color-scheme的自动调整
color-scheme 和 @media (prefers-color-scheme: dark) 怎么分工
二者不是互斥，而是分层协作：前者管“浏览器画的”，后者管“你写的”。混淆会导致控件和内容颜色不一致。
-
color-scheme: light dark告诉浏览器：“我支持双模式，请用 Canvas/CanvasText 等系统色渲染原生控件” -
@media (prefers-color-scheme: dark)只负责重设你的 CSS 变量（如--bg-color），或直接改body背景，但它不控制<input>的边框色或滚动条轨道色 - 若只用媒体查询、不用
color-scheme，<input type="date">这类复杂控件在深色下仍可能显示刺眼白底 - 若只用
color-scheme、不用媒体查询，你的div和文字仍是浅色，整体不协调
如何让滚动条、表单控件真正随系统变色
关键不是写更多伪元素，而是信任系统语义色，并留出可被覆盖的余地。
- 在
:root中设置color-scheme: light dark，同时在加<meta name="color-scheme" content="light dark"> - 避免对原生控件硬写
background/border-color；改用background: Canvas、color: CanvasText等系统关键词（它们会随color-scheme自动切换） - 若必须定制滚动条，优先用
::-webkit-scrollbar-track+Canvas而非固定十六进制值，否则深色下易对比度不足 - 测试时关闭所有自定义
input样式，确认原生表现是否已符合预期，再逐步叠加局部修饰
真正容易被忽略的是：系统级适配不是“开了就完事”，而是一套信号链——<meta> 是入口声明，color-scheme 是控件层开关，@media 是内容层响应，三者缺一不可。漏掉任一环，都可能在某个 Android 设备或 Safari 版本上出现半截深色、半截浅色的割裂效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
