color-scheme 必须写在 :root 或 html 上才生效，写在其他元素上无效；它仅控制表单控件、滚动条等内置UI的默认配色逻辑，不直接改变 background-color 或 color，需配合 prefers-color-scheme 媒体查询实现主题响应。
color-scheme 声明写在哪才生效
color-scheme 不是给某个元素单独设的样式，它必须写在 :root 或 html 上，浏览器才认作“整页声明”。写在 div 或 button 上完全没用，也不会报错——这是最常被忽略的失效原因。
- ✅ 正确：
html { color-scheme: light dark; } - ❌ 无效：
button { color-scheme: light dark; }（对系统主题切换无影响） - ⚠️ 注意：
color-scheme只控制表单控件、滚动条、焦点环等**内置 UI 元素**的默认配色逻辑，不直接改变你的background-color或color
背景色随主题变，得靠 prefers-color-scheme 媒体查询
想让 background-color 真正响应系统主题，color-scheme 本身做不到，必须配合 @media (prefers-color-scheme: dark) 手动覆盖。
- 系统切换时，该媒体查询会实时重算，无需 JS 干预
- 不能只写
dark分支：有些用户设的是no-preference，建议补上兜底 - 示例：
:root {
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1e1e1e;
}
}
body {
background-color: var(--bg);
}为什么加了 color-scheme 却没看到滚动条变色
滚动条颜色不归 color-scheme 管，它只影响滚动条的“默认样式逻辑”（比如是否启用深色滚动条），但具体颜色还得靠 ::-webkit-scrollbar 等伪元素手动设。
-
color-scheme: dark可能让 Chrome 自动用深灰滚动条，但 Safari / Firefox 完全不支持该自动行为 - 要跨浏览器一致，仍需显式写：
/* 深色主题下滚动条轨道和滑块 */<br>@media (prefers-color-scheme: dark) {<br> ::-webkit-scrollbar-track { background: #2d2d2d; }<br> ::-webkit-scrollbar-thumb { background: #555; }<br>} - 别指望
color-scheme替你做所有事——它只是个信号，不是样式代理
兼容性坑：iOS Safari 12.2+ 才真正支持 prefers-color-scheme
老版本 iOS Safari（比如 12.1）会把 (prefers-color-scheme: dark) 当成无效媒体查询，直接跳过整个块。结果就是：深色主题用户看到的永远是浅色背景。
立即学习“前端免费学习笔记（深入）”；
- 检测方法：打开 Safari 开发者工具 → “Settings” → “Appearance” → 切换 Dark Mode，看样式是否更新
- 稳妥做法：用
@supports (color-scheme: dark)做二次判断，或干脆用 JS fallback（如读取window.matchMedia） - 注意：
color-scheme属性本身在 Safari 12.2+ 支持，但媒体查询支持晚于属性支持
实际效果取决于系统设置是否透传、浏览器是否识别、以及你有没有用对地方。很多“不生效”问题，其实卡在第一行 html { color-scheme: ... } 没写对位置。
