color-scheme属性仅声明支持深色主题，需与<meta name="color-scheme">、@media (prefers-color-scheme: dark)及CSS变量协同使用；meta必须静态置于head内，color-scheme须写在html或:root上，系统语义色更稳但有局限。
color-scheme 属性本身不能让页面“自动适配暗黑模式”，它只负责告诉浏览器：“我支持深色主题”，从而启用系统级原生控件的自动渲染。真要让整个页面变暗，必须和 @media (prefers-color-scheme: dark)、CSS 变量、<meta name="color-scheme"> 三者配合，缺一不可。
<meta name="color-scheme"> 必须静态写在 <head> 里
这是最容易被跳过的硬性前提。只写 CSS 中的 color-scheme，iOS Safari、微信 WebView、Samsung Internet 等会完全无视。
-
<meta name="color-scheme" content="light dark">必须放在<head>内，且越早越好（推荐紧接<meta charset>后） -
content值只能是空格分隔的light或dark，不能加引号、逗号或多余空格 - 动态插入该
<meta>（比如用 JS）无效——浏览器解析 HTML 初期就要确认能力 - 漏掉它，
<input>、<select>、滚动条、<progress>全部卡在浅色外观，无论你 CSS 写得多全
color-scheme: light dark 只能写在 html 或 :root 上
这不是普通样式属性，而是整页级信号。写错位置等于没写。
- ✅ 正确：
html { color-scheme: light dark; }或:root { color-scheme: light dark; } - ❌ 无效：
body { color-scheme: light dark; }、.form-group { color-scheme: dark; }、input { color-scheme: light dark; } - 它只影响未被显式覆盖样式的原生控件：表单边框、滚动条轨道、
<canvas>默认背景、::-webkit-scrollbar-thumb等 - 一旦你给
input写了background-color: #fff，color-scheme就彻底失效——它不强制覆盖，只提供默认值
@media (prefers-color-scheme: dark) 要完整覆盖变量，且不能嵌套
这个媒体查询管的是你写的样式，不是浏览器画的控件。它和 color-scheme 是分工关系，不是替代关系。
立即学习“前端免费学习笔记（深入）”；
- 必须先在
:root中定义浅色默认变量，再在媒体查询中覆盖深色值：:root { --bg: #ffffff; --text: #333333; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e0e0e0; } } - 所有使用处必须带 fallback：
background-color: var(--bg, #ffffff);，否则变量未定义时样式崩塌 - 不要把媒体查询嵌套在其他条件里，例如：
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }—— 旧版 Safari 直接跳过 - 第三方组件库（如 Ant Design、MUI）通常靠 JS 注入 class 控制主题，和你的媒体查询规则冲突；需用更具体的选择器覆盖，例如：
[data-theme="dark"] .ant-btn
系统语义色（Canvas、CanvasText）比十六进制更稳，但有硬限制
想让原生控件真正“自动响应”，就得放弃硬编码颜色，改用系统关键词。
-
background-color: Canvas;和color: CanvasText;会随系统高对比度、深色/浅色设置自动微调亮度与饱和度 - 它们不支持 alpha，
CanvasAlpha无效；需要半透效果，得用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或 fallback 到变量 - 内联 SVG 图标不会自动反色，
fill: currentColor或fill: var(--icon-fill)才能响应主题变化 - 滚动条伪元素（如
::-webkit-scrollbar-thumb）也得用变量或系统色，不能遗漏
最常被忽略的点是：color-scheme 和 @media (prefers-color-scheme: dark) 的执行时机不同，前者在 HTML 解析初期生效，后者在 CSSOM 构建后才起效——这意味着首屏仍可能闪白，必须靠 JS 初始化 + data-theme 属性提前标记来补救。
