不可省略，它是浏览器启用系统级深色ui的开关；不加该标签，即使@media (prefers-color-scheme: dark)完整，、滚动条等原生控件仍强制浅色渲染。
不加 <meta name="color-scheme">，哪怕写了完整的 @media (prefers-color-scheme: dark)，<input>、<select></select>、滚动条、焦点环等原生控件大概率还是浅色——这不是 CSS 没生效，是浏览器压根没被授权用深色渲染它们。
为什么 <meta name="color-scheme"> 不可省略
这个标签不是“锦上添花”，而是浏览器决定是否启用系统级深色 UI 的开关。它在 HTML 解析早期就起作用，告诉浏览器：“我支持 light 和 dark 两种配色方案”。没有它，Chrome/Safari/Firefox 默认按 light 渲染所有原生控件，哪怕你把 body 背景设成 #121212，<input> 边框仍可能是浅灰、滚动条仍是亮色。
- 必须写在
内，且越靠前越好（<title></title>后立即插入） -
content值只能是空格分隔的light dark，不能加引号，不能写成"dark"或dark light（部分浏览器会忽略单值） - JS 动态插入无效：
document.head.appendChild(...)或setAttribute()都不会触发重绘 - 它不影响你写的任何 CSS 颜色，只影响浏览器对
accent-color、caret-color、滚动条 track/thumb、<progress></progress>、焦点环等的默认渲染逻辑
color-scheme CSS 属性和 meta 标签的区别
<meta name="color-scheme"> 是全局声明，color-scheme CSS 属性是局部控制。前者让整个页面“有资格”用系统深色 UI，后者让你能精细指定某块区域“必须用浅色”或“强制用深色”。
-
:root { color-scheme: light dark; }等价于 meta 标签，但兼容性略差（Firefox 对color-scheme支持不全，比如<select></select>下拉箭头可能不翻转） -
form { color-scheme: light; }可让整个表单区域保持浅色，即使系统是深色模式——适合需要高对比度输入的场景 -
div.dark-section { color-scheme: dark; }仅对该 div 及其子元素内的原生控件生效，不影响页面其他部分 - 自定义样式（如
background-color: #333）会覆盖color-scheme的效果，它只管“没写颜色时该用什么系统色”
常见错误现象与修复路径
页面内容变暗了，但地址栏、滚动条、输入框边框还是亮的？八成是 <meta name="color-scheme"> 没生效或写错了。
- 检查是否漏写：直接 View Source，确认
<meta name="color-scheme" content="light dark">存在于最上方 - 检查拼写：不是
color_scheme、colorscheme，也不是name="theme-color" - 检查值格式：不能是
content="light, dark"（逗号）、content='light dark'（单引号）、content="Light Dark"（大小写敏感） - Safari 12.1+ / Chrome 76+ / Firefox 67+ / Edge 79+ 支持，IE 完全不支持，无需考虑
- 如果用了 Web Component 或 Shadow DOM，需在 shadow root 内单独设置
color-schemeCSS 属性，meta 标签不穿透
和 @media (prefers-color-scheme: dark) 怎么配合
prefers-color-scheme 是媒体查询，只负责响应系统偏好并应用你写的 CSS；color-scheme 是底层能力开关，让它能真正影响原生控件。两者缺一不可。
- 先加 meta 标签，让原生控件“看起来像系统”
- 再用
@media (prefers-color-scheme: dark) { :root { --bg: #121212; } }定义变量，所有颜色相关属性都用var(--bg)，避免硬编码 - 不要在媒体查询里重复写
background-color: #121212，除非你明确想覆盖color-scheme的默认行为 - 用户手动切换主题时，需用
localStorage+data-theme属性覆盖系统偏好，并同步更新<meta name="color-scheme">的content（注意：JS 修改无效，只能服务端渲染或静态生成两套 HTML）
最易被忽略的一点：meta 标签必须在 HTML 加载初期就存在，它不像 CSS 或 JS 那样可以延迟加载或动态注入——一旦解析完成，它的作用就锁死了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
