必须添加<meta name="color-scheme">标签并配合:root{color-scheme:light dark}和@media(prefers-color-scheme)才能实现原生控件系统级深浅色适配。
不写 <meta name="color-scheme">，仅靠 CSS 的 color-scheme 属性在多数浏览器（尤其是 Safari 和旧版 Chrome）中无法触发原生控件的系统级适配。
必须在 <head> 里加 <meta name="color-scheme">
这是最常被跳过的硬性前提。浏览器需要在解析 HTML 初始阶段就获知页面支持的配色能力，否则滚动条、<input> 边框、<select> 下拉箭头等原生 UI 会沿用默认浅色样式，哪怕你写了完整的 CSS。
-
content值只能是空格分隔的light或dark，例如：content="light dark"—— 不能加引号，不能用逗号，不能写成"light dark"或light, dark - 必须放在
<head>内且越早越好，推荐紧接在<meta charset>后、<title>前；放在<title>后仍有效，但延迟可能导致首屏闪动 - 写错名字（如
name="theme"或name="color-sceheme"）或漏掉该标签，等于没声明，后续所有color-schemeCSS 都可能被忽略
:root { color-scheme: light dark } 是必要补充，不是替代方案
color-scheme 是 CSS 属性，只能通过 CSS 声明，不能写在 HTML 标签上（如 <html style="color-scheme: light dark"> 仅限调试，不推荐生产使用）。它只对 :root 或 <html> 生效，设在 <body> 或 <div> 上完全无效。
-
:root { color-scheme: light dark; }让浏览器知道“我支持两种”，从而启用系统色（如Canvas、ButtonFace）自动映射逻辑 - 值为
light表示强制禁用深色适配（比如银行类页面要求始终浅色），dark同理但极少用 - 不要写
color-scheme: auto或color-scheme: "light dark"—— 前者非标准，后者语法错误导致整条规则失效
为什么写了还是没反应？重点排查这三类干扰
常见“写了但没变色”不是语法问题，而是上下文覆盖或时机错位。
立即学习“前端免费学习笔记（深入）”；
- 自定义样式压过了系统色：例如
input { background-color: #fff !important; }会彻底屏蔽color-scheme对背景的控制；应改用background-color: Canvas;这类系统关键词 - JS 动态改主题时只更新了 CSS 变量或 class，却忘了同步修改 meta：
document.querySelector('meta[name="color-scheme"]').content = "light dark" - 用了广色域函数（如
color-mix(in lch, ...)或display-p3()）在低色域设备上渲染异常，视觉上像“没切换”，实际是色彩空间错配
color-scheme 和 @media (prefers-color-scheme) 必须配合使用
color-scheme 管的是浏览器画的——滚动条轨道、<progress> 填充色、<button> 默认边框；@media (prefers-color-scheme: dark) 管的是你写的——body 背景、文字颜色、自定义组件。
- 只写媒体查询，
<input type="date">在深色系统下仍可能弹出刺眼白底日历面板 - 只写
color-scheme，你的<div>和段落文字仍是浅色，整体割裂 - 真正生效的最小组合是：
<meta name="color-scheme" content="light dark">+:root { color-scheme: light dark; }+@media (prefers-color-scheme: dark) { /* 自定义内容样式 */ }
最容易被忽略的是：系统级适配依赖一套信号链，<meta> 是入口许可，color-scheme 是语义授权，prefers-color-scheme 是样式响应——少任何一环，原生控件就卡在默认状态不动。
