@media (prefers-color-scheme: dark) 无反应的主因是变量未在 :root 中预先定义浅色默认值或规则顺序错误，导致深色模式下变量回退为 unset；必须先在 :root 完整声明所有主题变量，默认用浅色值，深色规则置于其后，且需配合 color-scheme: light dark 和显式重置原生控件样式。
为什么写了 @media (prefers-color-scheme: dark) 却没反应
不是媒体查询失效，而是变量没定义或顺序错了。浏览器只认完整语法 @media (prefers-color-scheme: dark)，漏掉冒号或值（比如写成 @media (prefers-color-scheme)）直接忽略整块规则。更常见的是：浅色默认值根本没在 :root 里声明，导致深色规则一覆盖，浅色系统下 var(--bg-color) 回退为 unset，body 变透明、文字消失。
-
:root必须先完整定义所有变量的浅色值，例如--bg-base: #ffffff;、--text-primary: #1a1a1a; - 深色规则必须放在所有默认样式之后，CSS 按顺序覆盖，不看“媒体查询优先级”
- 别嵌套写：
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }—— Safari 13.3 之前直接跳过
:root 里变量怎么声明才不翻车
变量不是全局常量，它的存在与否取决于声明位置和时机。:root 是唯一能保证全页面继承的位置；写在 .dark 或 body 里，<input>、<svg></svg>、伪元素就拿不到值。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 所有主题变量（颜色、边框、阴影、字体大小）必须在顶层
:root块中一次性声明，默认用浅色值 - 变量名加语义前缀，比如
--theme-bg-surface，避免和第三方库（如 Tailwind 的--tw-）冲突 - 别依赖 fallback：
color: var(--text-primary, #333)看似安全，但拼错变量名（--text-prmiary）时直接回退到#333，深色背景下文字不可见
原生控件（<input>、滚动条、<svg></svg>）为啥还是亮色
CSS 变量对它们完全无效——它们不读自定义属性，也不响应 prefers-color-scheme。仅改 :root 变量，表单、滚动条、SVG 图标照样白底黑字。
- 必须在
html或:root上加color-scheme: light dark，否则 iOS Safari 和部分 WebView 强制渲染浅色表单 -
<input>、<select></select>、<textarea></textarea>要显式重置样式：background: var(--bg-surface); color: var(--text-primary); -
svg的fill和stroke必须用变量：fill: var(--icon-primary);，不能靠继承或currentColor自动适配 -
::-webkit-scrollbar-thumb等伪元素也要用变量，且需单独写规则，不能指望它自动跟随主题
手动切换和系统偏好怎么共存不打架
用户点按钮切深色，和系统设为浅色，两者必须分层处理。用 JS 直接调 document.documentElement.style.setProperty() 改变量值，会彻底屏蔽 prefers-color-scheme 的自动响应——下次用户改系统设置，页面毫无反应。
- 推荐结构：
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { ... } }，让系统偏好兜底，data-theme优先级更高 - JS 切换只操作
document.documentElement.setAttribute('data-theme', 'dark')，不碰变量值 - 务必同步
localStorage.setItem('theme', 'dark')，并在页面加载初期就读取并设置 class 或 attribute，否则首屏闪白 - 服务端渲染（SSR）时，需根据请求头
Sec-CH-Prefers-Color-Scheme预设data-theme，避免客户端水合后样式跳变
stroke，从 <button></button> 的 focus ring 到 canvas 的背景色——都通过同一套变量驱动，且不被任意一层 CSS 层叠或 JS 操作意外打断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
