<meta name="color-scheme" content="light dark"> 告诉浏览器网页支持亮色和暗色模式，使表单控件、滚动条、焦点轮廓等原生UI元素依系统偏好自动适配，但不影响CSS颜色或触发媒体查询。
的实际作用是什么？">
这个 <meta name="color-scheme" content="light dark"> 标签的作用是告诉浏览器：当前网页支持亮色和暗色两种配色模式，允许浏览器根据用户的系统偏好自动适配页面的默认颜色表现（尤其是表单控件、滚动条、焦点轮廓等由浏览器渲染的原生UI元素）。
它影响哪些内容
该标签不改变你写的 CSS 中的颜色，也不触发媒体查询或 JavaScript 事件。它主要作用于：
- 表单控件（如
<input>、<select>、<button>）的默认背景、边框和文字颜色 - 滚动条轨道与滑块的默认样式（在部分浏览器中）
- 焦点轮廓（
:focus默认高亮色）的色调倾向 - 某些浏览器对
<textarea>或<meter>等元素的内置渲染
它和 CSS 的 @media (prefers-color-scheme) 不是一回事
color-scheme 是一个声明式提示，属于“我支持什么”，而 @media (prefers-color-scheme) 是响应式逻辑，属于“我如何响应”。两者常配合使用：
- 只写
<meta name="color-scheme">：浏览器可优化原生控件，但你的自定义样式（比如background: white）不会自动变黑 - 只写
@media查询：你能控制所有 CSS，但原生控件仍可能在暗色模式下显示刺眼的白底灰字（除非你显式重置） - 两者都用：既启用浏览器的底层适配，又保留完全的样式控制权
兼容性与注意事项
该 meta 标签从 Chrome 85、Firefox 96、Safari 15.4 起支持，现代主流浏览器基本可用。注意几点：
- 必须放在
<head>中，且越早越好（最好在任何 CSS/JS 之前） -
content值可以是"light"、"dark"或"light dark"（空格分隔，顺序无关） - 若省略该标签，浏览器会按传统方式渲染原生控件（通常固定为亮色），可能在用户开启系统暗色模式时显得违和
- 它不能替代
<meta name="theme-color">，后者控制地址栏/标签页颜色，两者职责不同
不复杂但容易忽略——加一行 meta，就能让表单控件更自然地融入用户的系统体验。
