color-scheme是css属性，用于声明页面支持的配色方案，仅影响未被显式样式覆盖的原生控件，如input、select、button、textarea、checkbox、radio及滚动条（chrome/safari），需配合:root声明和@media(prefers-color-scheme)协同控制自定义样式。
color-scheme 是什么，它能控制哪些控件？
color-scheme 是一个 CSS 属性，用于告知浏览器：当前元素（及其后代）支持哪种配色方案。它本身不直接“设置颜色”，而是告诉浏览器“你可以放心用系统默认深色/浅色样式渲染这些原生控件”。生效范围限于表单控件（<input type="text">、<select></select>、<button></button>、<textarea></textarea>、<checkbox></checkbox>、<radio></radio> 等）和滚动条（仅部分浏览器），前提是这些控件未被显式 CSS 覆盖（比如没写 background-color 或 color）。
怎么写才让系统控件响应深色模式？
最常用且推荐的方式是加在 :root 上，配合 prefers-color-scheme 媒体查询做条件声明：
/* 告诉浏览器：我支持两种方案，优先按用户系统偏好来 */
:root {
color-scheme: light dark;
}
<p>/<em> 可选：进一步微调深色模式下的基础色（不影响原生控件，只影响你写的 CSS） </em>/
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e6e6e6;
}
}</p>
关键点：
-
color-scheme: light dark比单写dark更安全——浏览器知道你“兼容”两者，才会启用自动切换逻辑 - 如果只写
color-scheme: dark，某些浏览器（如 Safari）可能忽略系统偏好，强制用深色渲染原生控件，导致浅色模式下控件异常发黑 - 该属性对自定义组件（比如用
div模拟的按钮）完全无效，它只作用于浏览器内置渲染逻辑
为什么写了 color-scheme 却没效果？常见踩坑点
最常见的失效原因不是属性写错，而是被其他 CSS “无意覆盖”了：
- 给
input或button显式设置了background-color、border-color或color—— 一旦有任一颜色相关属性，浏览器就放弃自动适配，color-scheme彻底失效 - 用了重置库（如 normalize.css 或 modern-normalize），它们常带
appearance: none，这会剥离原生控件样式，color-scheme失去作用对象 - 在
iframe内或 Shadow DOM 中使用时，需在对应作用域内单独声明color-scheme，它不继承 - Firefox 目前（v128）仍不支持
color-scheme控制滚动条，仅 Chrome/Safari 支持；表单控件支持度则三者基本一致
要不要用 meta 标签替代 CSS 的 color-scheme？
不要。HTML 中的 <meta name="color-scheme" content="light dark"> 是过时方案（已从规范移除），仅作为页面级兜底存在，且兼容性差（Safari 13.1+ 支持，Chrome/Firefox 忽略）。它无法动态响应 prefers-color-scheme 切换，也不能作用于局部元素。所有现代场景都应使用 CSS 的 color-scheme 属性，配合媒体查询控制。
真正容易被忽略的是：这个属性必须和你的 CSS 颜色策略解耦——它只管“让系统控件跟系统走”，而你自己的文字、背景、边框等，得靠 @media (prefers-color-scheme: dark) 单独写。混为一谈，反而会让控件颜色和页面颜色不同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
