color-scheme meta 标签是原生控件适配系统深色/浅色模式的必要前置声明，必须置于内且越靠前越好，content值为“light dark”（不可加引号），配合:root{color-scheme}可兼顾兼容性与细粒度控制。
color-scheme meta 标签不是可选配置，是原生控件适配系统深色/浅色模式的**必要前置声明**。不加它，哪怕写了完整的 @media (prefers-color-scheme: dark)，input、select、滚动条等仍大概率保持浅色样式（尤其在 Safari 和旧版 Chrome 中）。
必须写在 <meta name="color-scheme">
这个标签要在 HTML 解析早期生效，所以必须放在 内、且越靠前越好（最好在 <title></title> 后立即插入）：
<meta name="color-scheme" content="light dark"><title>My App</title> ...
-
content值只能是空格分隔的关键词：light、dark、light dark或dark light——顺序无关，也**不能加引号**，写成"light dark"或light, dark会失效 - 值为
light dark表示“我支持两种，由系统决定用哪个”；只写light是强制禁用深色适配（比如金融类页面明确要求始终浅色） - 不写该 meta，或写错格式，Safari iOS 16.4 之前版本可能完全忽略后续的
color-schemeCSS 声明
color-scheme meta 和 :root { color-scheme } 的关系
两者作用不同，但常共存：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<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 是个无声的许可状——不亮出来，系统偏好就无法落地到按钮边框、输入框焦点环这些细节上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
