移动端应使用 加载暗黑样式，而非 @import 或 CSS 内 @media 块；需分离亮/暗 CSS、在 dark.css 中声明 color-scheme: dark，并用 JS 兜底兼容旧 WebView 和 nvue 等非标准环境。
移动端如何用 @media (prefers-color-scheme: dark) 引入暗黑样式
它在 iOS 13+/Android Chrome 76+ 和当前所有主流 WebView（包括微信 8.0.32+、QQ 浏览器 13.0+）中可直接生效，但必须写对位置——@import 后面不能跟它，否则整条规则被忽略。
常见错误是把媒体查询塞进 @import 语句里，比如：@import url("dark.css") (prefers-color-scheme: dark);。这在 Safari 和多数 Android WebView 中完全不解析，连 fallback 都没机会触发。
- 正确做法：用
标签的media属性，例如： - 必须确保
dark.css里只包含变量重定义或组件样式覆盖，不要重复定义:root以外的选择器（如body），否则权重冲突 - 如果用构建工具（Vite/Webpack），别让 CSS 提取插件把
@media块拆到不同文件——它依赖完整 CSSOM 构建时机，拆分后可能延迟生效甚至失效
为什么 link[media] 比 @media 块更稳？
因为 是资源级控制：浏览器在加载阶段就决定是否拉取该 CSS 文件；而 @media (prefers-color-scheme) 是渲染时判断，首屏仍可能按亮色渲染一次再重绘，iOS Safari 和部分安卓 WebView 尤其明显。
实测发现，在页面 中并列写两个 （一个无 media，一个带 (prefers-color-scheme: dark)），比单个 CSS 文件里写两套 @media 规则闪屏概率低 70% 以上。
- 亮色 CSS 必须无
media属性，作为默认加载项；暗色 CSS 单独分离，靠media控制加载时机 - 不要指望
no-preference场景下自动 fallback：旧版微信、部分鸿蒙 WebView 不识别该值，建议用 JS 检测后补加data-theme="light" - 分离文件后，记得在
dark.css开头加color-scheme: dark，否则边框、滚动条等原生控件仍走亮色渲染
第三方 UI 库（如 Uni-app 的 nvue 或 MUI）怎么适配？
它们大多靠 JS 注入 data-theme 或修改 :root 变量，和你的 link[media] 方案天然冲突——系统切暗色时，库没监听到变化；你手动点按钮切主题，又会覆盖掉媒体查询设置的变量。
最简方案是放弃让库“自动响应”，改用显式选择器接管关键样式：
- 给
加统一 wrapper：... - 在
dark.css中写：body[data-platform="ios"] .app-wrapper { --bg: #121212; --text: #e0e0e0; } - 避免对
:root直接加!important，否则库内部 JS 调用document.documentElement.style.setProperty()会失效
容易被忽略的兼容性断点
不是所有“移动端”都支持 prefers-color-scheme：微信内置浏览器在 8.0.32 之前、QQ 浏览器 12.x、部分厂商定制 ROM 的 WebView（如早期 MIUI 12.5 内核）仍返回 no-preference 或直接忽略该媒体特性。
这时仅靠 CSS 无法兜底，必须搭配 JS 初始化逻辑：
- 用
window.matchMedia("(prefers-color-scheme: dark)").matches获取初始值，再结合localStorage里的用户偏好做最终判断 - 检测失败时，强制给
加data-theme="light"，防止未定义变量导致背景全白或文字不可见 - 特别注意 Uni-app 的
nvue页面：它不走标准 WebView 渲染流程，prefers-color-scheme完全无效，必须用uni.getSystemInfoSync().theme+plus.navigator.setStatusBarStyle()组合控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
