根本原因是未在head中声明，导致浏览器未启用系统级暗黑渲染逻辑，原生控件如input、select、滚动条等始终按亮色默认绘制，即使css已写暗色规则也无效。
为什么input在暗黑模式下还是亮色？
根本原因不是CSS没写对，而是浏览器压根没启用暗黑渲染逻辑。只要没在里加<meta name="color-scheme" content="light dark">，<input>、<select></select>、滚动条、焦点环这些原生控件就永远按系统默认亮色画——哪怕你写了@media (prefers-color-scheme: dark)也白搭。
这个meta标签必须硬编码在首屏HTML里，JS动态插入无效；content值只能是light dark（空格分隔），写成dark或auto会被忽略。
input边框、背景、文字颜色怎么统一控制？
别给input单独写background: #121212这种硬编码，一来维护困难，二来和表单其他元素（如textarea、select）不一致。正确做法是用CSS变量集中管理：
- 在
:root中定义默认值：--input-bg: #ffffff、--input-border: #d1d5db、--input-text: #1f2937 - 在
@media (prefers-color-scheme: dark)里只覆盖变量：--input-bg: #1f2937、--input-border: #37414f、--input-text: #f9fafb - 所有
input样式都引用变量：background: var(--input-bg)、border-color: var(--input-border)、color: var(--input-text)
原生控件细节（下拉箭头、光标、滚动条）怎么改？
媒体查询不会自动翻转这些，必须手动声明：
-
input[type="date"]::-webkit-calendar-picker-indicator、select::-webkit-appearance需显式设filter: invert(1) hue-rotate(180deg)或重置background - 光标颜色用
caret-color: var(--input-text)，别依赖color继承 -
input::-webkit-inner-spin-button和::-webkit-outer-spin-button要appearance: none再重绘 -
textarea内滚动条用scrollbar-color: var(--input-border) var(--input-bg)（Firefox）和::-webkit-scrollbar（Chrome/Safari）分别处理
data-theme切换后input样式不更新？
常见原因是data-theme没挂对位置。必须设在document.documentElement（即标签）上，写成document.body.dataset.theme = "dark"完全无效——input::-webkit-inner-spin-button这类伪元素只响应根节点上的属性变化。
同时确保CSS选择器匹配准确：html[data-theme="dark"] input能生效，但.dark input或body[data-theme="dark"] input大概率失效。SSR直出时也要把data-theme写进初始，否则首屏会闪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
