必须同时添加并设置:root { color-scheme: light dark; }，二者缺一不可；前者是浏览器启用原生控件自动深色渲染的硬性开关，后者是配套声明，单独使用color-scheme无效。
只写 color-scheme 属性本身，页面不会自动变暗，也改不了 <input> 或滚动条颜色——它必须和 <meta name="color-scheme"> 配合才能触发浏览器对原生控件的自动深色渲染。
为什么写了 color-scheme: light dark 却没反应
常见现象是：CSS 里加了 :root { color-scheme: light dark; }，但 <input> 还是白底、滚动条 thumb 还是亮色。
-
color-scheme不是“开关”，而是“说明书”；真正起效的前提是 HTML 中存在静态<meta name="color-scheme" content="light dark">—— 它才是浏览器启用 UA 自动适配逻辑的硬性开关 - 这个
<meta>必须放在内，且不能用 JS 动态插入（Safari 和多数 WebView 会直接忽略） -
content值只能是light、dark或空格分隔的组合（如light dark），不能写成auto或dark only - 部分安卓 WebView 要求
color-scheme必须写在html元素上，写在:root或body可能不识别
color-scheme 和 @media (prefers-color-scheme: dark) 怎么分工
二者缺一不可，但职责完全不同：
-
color-scheme+<meta>：告诉浏览器“我能适配”，让<input>、<select></select>、<progress></progress>、::-webkit-scrollbar等原生元素自动使用系统语义色（如Canvas、CanvasText）重绘 -
@media (prefers-color-scheme: dark)：告诉浏览器“我现在要怎么适配”，用于覆盖你自己写的 CSS 变量或样式，比如--bg、--text - 漏掉前者，原生控件卡在浅色；漏掉后者，你写的文字/背景/边框等仍为浅色值
- 顺序不能颠倒：先声明默认变量（浅色），再在媒体查询中覆盖（深色），否则深色规则可能被后续无条件样式覆盖
哪些元素受 color-scheme 影响，哪些必须手动处理
color-scheme 只影响浏览器内置语义化颜色渲染的原生组件，不改变你写的 background-color 或 color 值。
- ✅ 自动响应：
<input>、<textarea></textarea>、<select></select>、<button></button>、<progress></progress>、::-webkit-scrollbar-thumb、canvas边框等 - ❌ 不自动响应：
div背景、自定义 SVG 的fill、伪元素内容、文字颜色（除非你用color: CanvasText这类系统色关键词） - ⚠️ 滚动条颜色需额外写：
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }，且--scroll-thumb本身得在媒体查询中更新 - ⚠️ SVG 图标不会反色，
fill必须显式绑定变量（fill: var(--icon-fill)）或用currentColor
容易被忽略的兼容性和细节
很多问题不是语法错，而是边缘场景没兜住：
-
Canvas、CanvasText等系统色不支持 alpha 通道，CanvasAlpha无效；需要半透效果，得用color-mix(in srgb, CanvasText 70%, transparent) - 服务端渲染（SSR）首屏必然闪动：HTML 渲染时无法读取客户端偏好，必须在
上同步注入data-color-scheme属性，并内联关键 CSS - iOS Safari 对嵌套媒体查询支持差，
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }在旧版中完全不生效 - 第三方 UI 库（如 Ant Design、Chakra UI）通常用自己的主题机制，和
prefers-color-scheme并行存在，容易冲突；建议统一用[data-theme="dark"]控制优先级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
