color-scheme仅影响未被显式样式覆盖的原生控件，需配合和@media (prefers-color-scheme)协同使用，缺一不可。
color-scheme 只影响未被覆盖的原生控件
color-scheme 不是样式开关，而是渲染层信号：它只告诉浏览器“允许对 input、select、button、::-webkit-scrollbar 等原生元素使用系统语义色”，前提是这些元素**没被你显式设置 background-color、color 或 border-color**。一旦写了 input { background: #fff; }，color-scheme 就彻底失效——它不会覆盖你的声明，也不会触发重绘。
@media (prefers-color-scheme: dark) 才控制自定义区域
你写的卡片、标题、图标、SVG 填充色、自定义滚动条样式……这些全在 author stylesheet 层，color-scheme 对它们完全无感。必须靠 @media (prefers-color-scheme: dark) 主动改变量或选择器：
- 漏掉这条媒体查询 → 卡片背景还是白的，文字还是黑的，哪怕系统是深色
- 把媒体查询写在
:root定义之前 → 浅色默认值会覆盖深色赋值，变量实际没变 - 嵌套在
@media (max-width: 768px)里 → iOS Safari 15 及更早版本直接忽略整块
两者缺一不可的真实表现差异
单独用 color-scheme: light dark：
-
input边框可能变暗，但内部文字仍黑（因为color被你设死了） -
progress轨道颜色匹配了，但填充色还是亮蓝（没写媒体查询改accent-color） -
canvas默认背景随系统变暗，但 canvas 上绘制的文字颜色还是你硬写的#000
单独用 @media (prefers-color-scheme: dark)：
- 你改了
.card { background: #1a1a1a; }，但input还是白底黑字，滚动条 thumb 还是亮灰 - 用户切到深色系统后，下拉菜单的
option文字糊成一片（UA 样式未激活） - 部分 WebView（如鸿蒙 ArkWeb）甚至不触发该媒体查询，直接 fallback 到浅色
meta 标签和 html 声明是硬性前提
很多人卡在第一步：color-scheme 写在 div 上、或漏了 <meta name="color-scheme" content="light dark"> —— 这会导致整个机制从源头失效：
-
<meta>必须放在顶部，紧接<meta charset>后；写在<title></title>后可能首屏闪动 -
color-scheme只能写在:root或html上，写在body都无效 - content 值只能是空格分隔的
light dark，不能加引号、逗号或大小写混写
真正容易被忽略的是：没有 <meta>，iOS Safari 和多数安卓 WebView 会直接无视所有 color-scheme 声明，连带影响 @media 的 UA 渲染协同效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
