color-scheme 是声明页面支持的配色方案，用于让浏览器自动适配原生ui控件（如滚动条、焦点框、表单元素）的系统主题，而非触发深色模式切换；需配合 @media (prefers-color-scheme) 手动设置自定义样式。
color-scheme 是什么，它真能触发系统级深色模式吗？
color-scheme 不是“开启深色模式”的开关，而是告诉浏览器：当前元素（或整个页面）支持哪些配色方案，以便浏览器在渲染表单控件、滚动条、焦点框等原生 UI 组件时，自动适配系统主题。它本身不改变你的 background-color 或 color，也不会触发 @media (prefers-color-scheme) 媒体查询的切换逻辑。
- 它只影响浏览器绘制的“原生部件”，比如
<input type="range">的滑块、<select></select>的下拉箭头、textarea的 resize 手柄、焦点 outline 的颜色等 - 必须配合
@media (prefers-color-scheme: dark)手动写样式，才能真正实现深色界面 - 值为
light、dark或light dark（推荐后者，表示同时兼容）
怎么正确声明 color-scheme？写在哪儿才生效？
color-scheme 应该作为 CSS 属性写在根元素上，最常用且推荐的方式是：
html {
color-scheme: light dark;
}
- 写在
:root或html上效果一致，但不要写在body或局部选择器里——那样对原生控件无效 - 值用空格分隔，不是逗号；
light dark表示“我支持两种，你按系统来选”，比只写dark更稳妥 - 如果你在
html上写了color-scheme: dark，但用户系统是浅色模式，部分浏览器（如 Safari）仍可能强制使用浅色原生控件，导致视觉割裂
为什么加了 color-scheme 却没看到滚动条变暗？
常见错误现象：加了 color-scheme: light dark，但 macOS 或 iOS 上的滚动条仍是亮色，或者 focus outline 颜色没变。
- 滚动条颜色不受
color-scheme控制，必须单独用::-webkit-scrollbar系列伪元素设置（且仅限 WebKit） - focus outline 的默认颜色由浏览器决定，
color-scheme仅让它“倾向”匹配系统主题，但若你写了outline: 2px solid #007aff这种固定色，就会完全覆盖掉自动行为 - 部分旧版 Chrome（color-scheme 支持有限，尤其在表单控件上表现不一致；建议始终用
@media (prefers-color-scheme: dark)显式重置关键颜色
和 prefers-color-scheme 媒体查询怎么配合用？
color-scheme 和 @media (prefers-color-scheme) 是互补关系，不是替代关系：
-
color-scheme: light dark→ “我准备好适配了，请浏览器放心渲染原生部件” -
@media (prefers-color-scheme: dark) { ... }→ “请帮我把文字、背景、图标这些自定义内容也切过去”
html {
color-scheme: light dark;
}
<p>@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
input, select, button {
background-color: #1e1e1e;
border-color: #333;
}
}</p>
- 别漏掉表单控件的显式样式，否则即使
color-scheme正确，input背景仍可能是白色（尤其在 Windows Chrome） - 如果你用 CSS 自定义属性做主题切换（如
--bg: #fff），记得在媒体查询里重设它们，color-scheme不会自动更新这些变量
真正容易被忽略的是：color-scheme 只在你「声明支持」的前提下，才让浏览器敢把原生部件画成深色；但它不负责任何颜色计算，也不触发重绘逻辑——所有视觉控制权，最终还在你写的 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
