color-scheme: light dark 仅影响未被显式覆盖的原生控件，需配合 且写在 head 顶部才能生效；自定义样式必须用 @media (prefers-color-scheme: dark) 配合 CSS 变量实现，系统色更适配高对比度模式。
只给 html 加 color-scheme: light dark 不会让页面变暗，它只影响原生控件（如 <input>、滚动条、<progress></progress>），且必须配合 <meta name="color-scheme"> 才能生效。
为什么写了 color-scheme 但表单还是白的
根本原因是浏览器默认“不信任”你支持深色模式——它需要明确的信号才能启用 UA 自动适配逻辑。
-
<meta name="color-scheme" content="light dark">必须写在最顶部，静态写死，不能用 JS 动态插入（iOS Safari 和多数 WebView 会直接忽略） -
color-scheme: light dark要写在html或:root上，仅声明在某个 class 或组件里无效 - 这个属性本身 不改变 你写的
background-color、color或 SVG 的fill，只接管未被显式覆盖的系统级元素 - 若同时设置了
background-color: #fff，那<input>就会无视color-scheme，坚持显示白底
@media (prefers-color-scheme: dark) 必须和 color-scheme 配合用
媒体查询负责你的 CSS 变量和自定义样式，color-scheme 负责原生控件。两者缺一不可，且顺序不能乱。
- 先在
:root定义浅色默认值：--bg: #ffffff、--text: #333333，漏掉会导致 light 模式下变量未定义 -
@media (prefers-color-scheme: dark)块必须放在所有默认样式 之后，否则会被后续无条件规则覆盖 - 深色规则里别只改
--bg，边框、阴影、占位符、伪元素颜色都要同步更新，否则出现“灰框白卡”这类混搭错乱 - 不要嵌套写：
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }—— Safari 12.1 之前完全不识别
系统语义色比十六进制更稳，但要用对地方
用 Canvas、CanvasText 这类系统色关键词，能随系统高对比度/深色设置自动微调，但它们有明确限制。
-
background-color: Canvas比#121212更可靠；color: CanvasText比#e0e0e0更适配高对比度模式 - 系统色不支持 alpha，
CanvasAlpha是无效写法；需要半透效果，得用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或 fallback 到变量 - 内联 SVG 图标不会自动反色，必须写
fill: currentColor或fill: var(--icon-fill)，不能靠filter: invert(1)（破坏语义、高对比度下不可读） - 滚动条需单独写伪元素：
::-webkit-scrollbar-thumb的颜色也得用变量或系统色，否则仍亮着
最易被忽略的是：CSS 变量重定义只对后续渲染生效，@media 规则不触发重绘，切换系统主题后已打开的页面不会自动更新——除非刷新或用 window.matchMedia 监听 + 手动触发状态同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
