必须同时设置 和 @media (prefers-color-scheme: dark) 手动覆盖 input 样式，仅 CSS 中声明 color-scheme 无效，且需使用系统语义色、高优先级选择器及 fallback 变量。
input 在深色模式下仍显示白底黑字，不是 CSS 没写对，而是浏览器根本没启用深色渲染逻辑——color-scheme 声明和 <meta name="color-scheme"> 缺一不可。
为什么加了 color-scheme: light dark 还是白底？
只在 CSS 里给 :root 或 html 设置 color-scheme，浏览器（尤其是 iOS Safari 和多数 WebView）会直接忽略。它不触发 UA 控件的自动适配，<input>、<select></select>、<progress></progress> 这些原生元素仍按浅色默认样式渲染。
-
<meta name="color-scheme" content="light dark">必须写在里，且不能被 JS 动态插入——这是硬性开关，缺了就等于告诉浏览器“我不支持深色模式” - 该
<meta>不影响你写的background-color或color，只管表单边框、滚动条 thumb、CanvasText 等系统语义色 - Android WebView 需确认容器已启用
forceDarkMode，否则prefers-color-scheme可能始终返回false
<input> 的背景和文字颜色必须靠 @media 覆盖
color-scheme 不改你的 CSS 规则，<input> 默认白底黑字不会自动变暗。要让它视觉上“正常”，得手动覆盖：
- 把
@media (prefers-color-scheme: dark)规则写在全局 CSS 底部，避免被后续重置样式覆盖 - 用系统语义色更稳：
background-color: Field;、color: FieldText;（比硬写#121212更适配高对比度模式） - 别漏掉伪元素：
input::-webkit-inner-spin-button、input::-webkit-calendar-picker-indicator在深色下可能发白，需单独设filter: invert(1) contrast(1.2)或替换为 SVG 图标 - 所有
var()必须带 fallback：background-color: var(--input-bg, #fff);，否则变量未定义时会透明或回退到 UA 默认值
移动端真机调试时最常漏的三件事
模拟器能切，真机切不动，大概率卡在这三个点：
-
<meta name="color-scheme">没写，或写在里，或被 SSR 模板引擎意外删掉 -
@media (prefers-color-scheme: dark)嵌套在@media (max-width: 768px)里——旧版 Safari 直接跳过整块规则 - 第三方 UI 库（如 Vant、NutUI）注入了自己的
.dark类，但没同步改:root变量，导致你的媒体查询规则被 reset；必须用html[data-theme="dark"] input这类高优先级选择器接管
最易被忽略的是：所有 input 相关样式（包括 ::placeholder、::-webkit-input-placeholder、border-color）都得在媒体查询里显式重写——浏览器不会帮你推导“深色模式下应该是什么颜色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
