color-scheme meta 标签是原生控件适配系统深色/浅色模式的必要前置声明，必须置于<head>内且越靠前越好，content值为“light dark”（不可加引号），配合:root{color-scheme}可兼顾兼容性与细粒度控制。

color-scheme meta 标签不是可选配置，是原生控件适配系统深色/浅色模式的**必要前置声明**。不加它，哪怕写了完整的 @media (prefers-color-scheme: dark)，input、select、滚动条等仍大概率保持浅色样式（尤其在 Safari 和旧版 Chrome 中）。

必须写在 <head> 里的 <meta name="color-scheme">

这个标签要在 HTML 解析早期生效，所以必须放在 <head> 内、且越靠前越好（最好在 <title> 后立即插入）：

<head>
  <meta name="color-scheme" content="light dark">
  <title>My App</title>
  ...
</head>

• content 值只能是空格分隔的关键词：light、dark、light dark 或 dark light——顺序无关，也**不能加引号**，写成 "light dark" 或 light, dark 会失效
• 值为 light dark 表示“我支持两种，由系统决定用哪个”；只写 light 是强制禁用深色适配（比如金融类页面明确要求始终浅色）
• 不写该 meta，或写错格式，Safari iOS 16.4 之前版本可能完全忽略后续的 color-scheme CSS 声明

color-scheme meta 和 :root { color-scheme } 的关系

两者作用不同，但常共存：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• <meta name="color-scheme"> 是全局、HTML 层级的声明，浏览器加载时立刻读取，影响所有原生控件
• :root { color-scheme: light dark; } 是 CSS 层级声明，需等待样式表解析，部分浏览器（如旧 Safari）对它的支持弱于 meta
• 推荐**两者都写**：meta 确保首屏兼容性，CSS 声明提供更细粒度控制（比如局部禁用：.legacy-form { color-scheme: light; }）

写了 meta 却没效果？检查这三件事

常见失效不是语法问题，而是上下文干扰：

• 页面有内联 style 或外部 CSS 强制覆盖了原生控件颜色（例如 input { background: white !important; }），会压过 color-scheme 的自动逻辑
• 用了 display-p3()、color-mix() 等广色域函数，低色域屏上渲染异常，导致视觉上“像没切换”，实际是色彩空间错配
• 在 JS 中动态修改主题时，只改了 CSS 变量或 class，却忘了同步更新 meta：document.querySelector('meta[name="color-scheme"]').content = "light dark"

真正起效的关键不在“怎么写”，而在“是否被浏览器在正确时机看到”。color-scheme meta 是个无声的许可状——不亮出来，系统偏好就无法落地到按钮边框、输入框焦点环这些细节上。