color-scheme 本身不能快速适配暗黑模式，必须配合 和 @media (prefers-color-scheme: dark) 才能实现原生控件与自定义样式的完整适配。

color-scheme 本身不能“快速适配”暗黑模式——它只管浏览器原生控件，不管你的 background-color、color 或自定义组件。真要让页面整体变暗，必须配合 <meta name="color-scheme"> 和 @media (prefers-color-scheme: dark)，缺一不可。

必须加 <meta name="color-scheme" content="light dark">

只在 CSS 里写 :root { color-scheme: light dark; } 是无效的，尤其在 iOS Safari 和多数 WebView 中完全不触发原生控件切换。<meta> 标签才是浏览器启用 UA 自动适配的硬性开关，且必须放在 里、<title></title> 之后、所有 CSS/JS 之前。

• 漏掉这个 meta → <input>、<select></select>、滚动条 thumb、<progress></progress> 全部卡在浅色外观
• 写成 content="dark" 或 content="auto" → 无效值，浏览器忽略，等同于没写
• 动态插入该 meta（比如 JS 创建）→ 大部分浏览器不识别，必须是初始 HTML 解析时就存在

color-scheme 只影响系统语义色，不影响你写的颜色

color-scheme: light dark 的作用范围非常明确：它告诉浏览器“允许我用 Canvas、CanvasText、ButtonFace 等系统色”，并让 UA 渲染器据此调整原生元素外观。但它不会改你的 background-color: #fff，也不会把 color: black 自动翻成白色。

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

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

下载

• 有效影响对象：<input> 边框、::-webkit-scrollbar-thumb、<button></button> 默认背景、Canvas 文本渲染色
• 完全不影响对象：你自己写的 div、h1、SVG fill、CSS 变量、第三方组件样式
• 想用系统色？写 background-color: Canvas 或 color: CanvasText，但注意它们不支持 alpha，CanvasAlpha 是无效值

@media (prefers-color-scheme: dark) 必须和 :root 变量配合用

媒体查询不是“开关”，它只是条件块；变量没定义默认值，深色模式下就会 fallback 到浏览器默认（可能全黑或全白），导致文字看不见或背景消失。

• 先定义默认值：:root { --bg: #fff; --text: #000; }
• 再覆盖深色：@media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e4e6eb; } }
• 所有使用处加 fallback：body { background-color: var(--bg, #fff); color: var(--text, #000); }
• 别嵌套媒体查询：@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } } → 旧版 Safari 直接跳过

首屏闪屏和第三方组件失联，根本不在 CSS 规则里

闪屏（FOUC）不是因为媒体查询写错了，而是 HTML 渲染早于 CSS 加载完成；第三方组件不响应，是因为它们有自己的主题逻辑，和你的媒体查询不联动。

• 内联最小化 JS 检测：<script>document.documentElement.dataset.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';</script>
• 关键样式同时写两套：[data-theme="dark"] body（防闪） + @media (prefers-color-scheme: dark) body（保语义）
• Ant Design / MUI 等库需强制接管：html[data-theme="dark"] .ant-btn，优先级必须高于库自身选择器
• 图片、图标不会自动反色：SVG 用 fill: currentColor 或 fill: var(--icon-fill)，别用 filter: invert(1)

真正难的不是加那行 color-scheme，而是确保 <meta> 存在、变量有 fallback、首帧不闪、第三方组件不脱节——这四点漏掉任意一个，用户看到的就是半截深色、半截浅色的割裂页面。

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