告诉浏览器网页支持亮色和暗色模式，使表单控件、滚动条、焦点轮廓等原生ui元素依系统偏好自动适配，但不影响css颜色或触发媒体查询。

的实际作用是什么？">

这个 <meta name="color-scheme" content="light dark"> 标签的作用是告诉浏览器：当前网页支持亮色和暗色两种配色模式，允许浏览器根据用户的系统偏好自动适配页面的默认颜色表现（尤其是表单控件、滚动条、焦点轮廓等由浏览器渲染的原生UI元素）。

它影响哪些内容

该标签不改变你写的 CSS 中的颜色，也不触发媒体查询或 JavaScript 事件。它主要作用于：

• 表单控件（如 <input>、<select></select>、<button></button>）的默认背景、边框和文字颜色
• 滚动条轨道与滑块的默认样式（在部分浏览器中）
• 焦点轮廓（:focus 默认高亮色）的色调倾向
• 某些浏览器对 <textarea></textarea> 或 <meter></meter> 等元素的内置渲染

它和 CSS 的 @media (prefers-color-scheme) 不是一回事

color-scheme 是一个声明式提示，属于“我支持什么”，而 @media (prefers-color-scheme) 是响应式逻辑，属于“我如何响应”。两者常配合使用：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• 只写 <meta name="color-scheme">：浏览器可优化原生控件，但你的自定义样式（比如 background: white）不会自动变黑
• 只写 @media 查询：你能控制所有 CSS，但原生控件仍可能在暗色模式下显示刺眼的白底灰字（除非你显式重置）
• 两者都用：既启用浏览器的底层适配，又保留完全的样式控制权

兼容性与注意事项

该 meta 标签从 Chrome 85、Firefox 96、Safari 15.4 起支持，现代主流浏览器基本可用。注意几点：

• 必须放在 中，且越早越好（最好在任何 CSS/JS 之前）
• content 值可以是 "light"、"dark" 或 "light dark"（空格分隔，顺序无关）
• 若省略该标签，浏览器会按传统方式渲染原生控件（通常固定为亮色），可能在用户开启系统暗色模式时显得违和
• 它不能替代 <meta name="theme-color">，后者控制地址栏/标签页颜色，两者职责不同

不复杂但容易忽略——加一行 meta，就能让表单控件更自然地融入用户的系统体验。