color-scheme不是深色模式开关，仅声明支持的系统配色方案；需通过或:root声明才能使原生控件适配系统偏好，且不影响自定义元素样式。
color-scheme 属性不能“开启”深色模式，它只是告诉浏览器：“这个元素能安全渲染 light 或 dark 配色方案”。浏览器据此决定是否对原生控件（如 input、select、滚动条）应用系统级样式。声明在元素上，只影响该元素及其**未覆盖系统颜色的子元素**——自定义了 background-color 或 color 的元素完全不受影响。
哪些元素支持 color-scheme 声明
只有能触发浏览器绘制原生 UI 的元素才真正响应它，典型包括：
-
html或:root：全局声明最常用，影响整个页面的原生控件 -
fieldset、legend：当它们包裹表单控件时，可局部启用配色协商 -
input、textarea、button、select：单独设置时，仅对该控件生效（但实际效果常被其自身默认样式或 reset CSS 覆盖） - 不推荐在
div、span、p等纯内容容器上设置——它们没有原生 UI 行为，color-scheme不起作用
color-scheme 的取值和常见误用
合法值只有 normal、light、dark、light dark（空格分隔），注意：
-
color-scheme: dark并不会强制让元素变黑，只是说“我能渲染 dark”，最终是否用 dark 样式，由用户系统偏好 + 浏览器决策 -
color-scheme: light dark是推荐写法，表示“我都支持”，浏览器才有权按需切换 -
color-scheme: normal等价于未声明，此时浏览器回退到默认浅色行为（不是跟随系统） - 不要写成
color-scheme: "light dark"——引号是非法语法，会导致整条声明失效
为什么给 input 单独设 color-scheme 往往没反应
原因很实在：
- 现代框架或重置 CSS（如 Normalize.css、Tailwind 的 base styles）通常已显式设置了
border-color、background-color，覆盖了浏览器原生深色样式 -
color-scheme只影响“未指定颜色”的场景；一旦你写了input { background: white; }，哪怕系统是深色模式，它也白到底 - 滚动条、
progress、meter等更依赖父级（如html）的color-scheme声明，子元素单独设意义有限 - Chrome 120+ 和 Safari 17.4+ 支持较好，Firefox 目前仅部分支持（如滚动条），别依赖它做跨浏览器一致控制
真正要让元素级适配可靠生效，得组合使用：<meta name="color-scheme"> 做早期声明 + :root { color-scheme: light dark; } 奠定基础 + @media (prefers-color-scheme: dark) 控制内容样式。单独抠某个 input 的 color-scheme，90% 的情况是在调试阶段白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
