写了color-scheme: light dark却没反应，大概率是漏了或写错位置；该声明必须置于内且越早越好，仅作用于原生控件，默认不改变自定义样式。

写了 color-scheme: light dark 却没反应？大概率是漏了 <meta name="color-scheme">，或者写在了错的地方。

必须加 <meta name="color-scheme"> 才生效

浏览器需要在解析 HTML 初始阶段就确认页面支持的配色能力，否则滚动条、<input> 边框、<select></select> 箭头等原生控件会沿用默认浅色样式，哪怕你 CSS 写得再全也没用。

• content 值只能是空格分隔的 light 或 dark，例如：content="light dark" —— 不能加引号，不能用逗号，不能写成 "light dark" 或 light, dark
• 必须放在 内，且越早越好；推荐紧接在 <meta charset> 后、<title></title> 前；放在 <title></title> 后仍有效，但延迟可能导致首屏闪动
• 写错名字（如 name="theme" 或 name="color-sceheme"）或漏掉该标签，等于没声明，后续所有 color-scheme CSS 都可能被忽略

color-scheme 只能写在 :root 或 html 上

它不是普通样式属性，而是整页级信号。写在 body、div 或 button 上完全无效，也不会报错——这是最常被忽略的失效原因。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 正确：html { color-scheme: light dark; } 或 :root { color-scheme: light dark; }
• ❌ 无效：button { color-scheme: light dark; }（对系统主题切换无影响）
• ⚠️ 它只控制原生控件（如 <input>、<select></select>、滚动条轨道、<progress></progress> 填充色）的默认系统色渲染，不改变你的 background-color 或 color

为什么原生控件还是没变色？重点排查三类干扰

常见“写了但没变色”不是语法问题，而是上下文覆盖或时机错位。

• 自定义样式压过了系统色：比如 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: light dark 告诉浏览器：“我支持双模式，请用 Canvas/CanvasText 等系统色渲染原生控件”
• @media (prefers-color-scheme: dark) 只负责重设你的 CSS 变量（如 --bg-color），或直接改 body 背景；但它不控制 <input> 的边框色或滚动条轨道色
• 若只用媒体查询、不用 color-scheme，<input type="date"> 这类复杂控件在深色下仍可能显示刺眼白底
• 若只用 color-scheme、不用媒体查询，你的 div 和文字仍是浅色，整体不协调

真正容易被忽略的是：系统级适配不是“开了就完事”，而是一套信号链——<meta> 是入口，:root { color-scheme } 是确认，@media 是延伸，三者缺一不可。漏掉任一环，原生控件就卡在默认状态里不动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！