uniapp暗黑模式 @media (prefers-color-scheme: dark) 不生效了是怎么回事？

我在uniapp中使用了@media (prefers-color-scheme: dark)来适配暗黑模式，但发现这个CSS媒体查询突然不生效了。之前是正常的，最近更新系统或框架后出现问题。请问可能是什么原因导致的？需要检查哪些配置或兼容性问题？

2 回复

检查CSS语法、作用域是否正确。确保设备系统已开启深色模式。可能是编译缓存问题，尝试清理HBuilderX缓存或重启项目。


在 UniApp 中，@media (prefers-color-scheme: dark) 不生效通常由以下原因导致，请逐一排查：

1. 系统/浏览器不支持

  • 确保设备系统（iOS 13+ / Android 10+）和浏览器支持 prefers-color-scheme。
  • 测试方法：在浏览器开发者工具中模拟暗黑模式，检查媒体查询是否生效。

2. UniApp 编译限制

  • 小程序平台不支持 prefers-color-scheme（如微信小程序）。
  • 解决方案：通过 uni.getSystemInfo() 动态获取系统主题，手动切换样式：
    // 在 App.vue 的 onLaunch 中监听
uni.getSystemInfo({
  success: (res) => {
    const theme = res.theme || 'light'; // 部分平台返回 theme 字段
    uni.setStorageSync('systemTheme', theme);
  }
});
    在页面中根据存储的 theme 动态应用样式类。

3. H5 端样式作用域问题

  • 检查 CSS 是否被正确编译到 H5 端，确保样式未被打包工具过滤。
  • 在 pages.json 中取消样式隔离：
    {
  "style": {
    "darkmode": false // 关闭小程序暗黑模式，避免冲突
  }
}

4. 缓存或设备设置

  • 清除浏览器缓存或重启应用。
  • 确认系统已开启暗黑模式，并在浏览器/WebView 中生效。

5. 样式优先级问题

  • 确保 @media 规则未被其他更高优先级样式覆盖。使用具体的选择器或 !important 测试：
    @media (prefers-color-scheme: dark) {
  body {
    background: #000 !important;
  }
}

总结步骤：

  1. 确认运行环境（H5 还是小程序）。
  2. H5 端检查浏览器兼容性和缓存。
  3. 小程序端需使用 API 动态适配。
  4. 排查样式冲突或编译问题。

根据你的平台选择对应方案即可解决问题。

回到顶部