uni-app 澎湃OS暗黑模式systeminfo中的theme仍然是light

信息类别	详细信息
产品分类	uniapp/App
PC开发环境	Windows
PC版本号	win11
HBuilderX	正式
HBuilderX版本号	4.08
手机系统	Android
手机版本号	Android 14
手机厂商	小米
手机机型	11 ultra
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

示例代码：

uni.getSystemInfoSync().theme === 'light


### 操作步骤：

uni.getSystemInfoSync().theme

预期结果：

uni.getSystemInfoSync().theme === 'dark


### 实际结果：

uni.getSystemInfoSync().theme === 'light

bug描述：

澎湃OS暗黑模式，systeminfo中的theme仍然是light

songsunli 1楼•5 天前

我的是荣耀8x，鸿蒙OS3.0，用的内置华为浏览器访问。项目编译为H5版本，通过const { theme } = uni.getSystemInfoSync()，任何情况下得到的也一直都是light。如果更换为edge浏览器则获取正确。我猜测是uniapp这边可能没有兼容到华为浏览器。

yuanlaile 2楼•5 天前

抱歉，是我理解错了，华为浏览器APP自身也是有深色模式的，相当于它把系统的深色模式拦截了，而通过const { theme } = uni.getSystemInfoSync()得到的是华为浏览器APP自身的深色模式（此时不是操作系统的深色模式），也就是说，只要手动更改华为浏览器APP自身的深色模式，那么获取到的值就是正确的。

zlyuanteng 3楼•5 天前

没做H5，是uni-app安卓

sinazl 4楼•5 天前

在 Uni-App 中，当你使用 uni.getSystemInfo() 获取系统信息时，返回的 theme 字段可能仍然显示为 light，即使设备已经启用了暗黑模式。这可能是因为 Uni-App 的底层实现尚未完全适配某些操作系统的暗黑模式特性，或者是因为操作系统本身没有正确地将主题信息传递给应用。

解决方法

手动监听主题变化：如果你发现 uni.getSystemInfo() 返回的 theme 字段不准确，可以尝试手动监听系统的主题变化。以下是一个示例：

// 监听系统主题变化
uni.onThemeChange((res) => {
    console.log('当前主题:', res.theme);
    if (res.theme === 'dark') {
        // 暗黑模式
    } else {
        // 亮色模式
    }
});

使用 CSS 媒体查询：你还可以使用 CSS 媒体查询来根据系统的颜色模式应用不同的样式：

[@media](/user/media) (prefers-color-scheme: dark) {
    /* 暗黑模式下的样式 */
    body {
        background-color: #000;
        color: #fff;
    }
}

[@media](/user/media) (prefers-color-scheme: light) {
    /* 亮色模式下的样式 */
    body {
        background-color: #fff;
        color: #000;
    }
}