【报Bug】uniapp， iOS中的 @media (prefers-color-scheme: dark) {}不生效，uni.onThemeChange也不回调；

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： macOS Sequoia

手机系统： iOS

手机系统版本号： iOS 26

手机厂商：苹果

手机机型： iPhone 13Pro

页面类型： vue

vue版本： vue3

打包方式：离线

项目创建方式： CLI

CLI版本号： 3.0.0-4070620250821001

示例代码：

@media (prefers-color-scheme: dark) {

}

onMounted(() => {
uni.onThemeChange(darkThemeChange);
});

onUnmounted(() => {
uni.offThemeChange(darkThemeChange);
});

function darkThemeChange(value) {
console.log("onThemeChange 系统主题切换 === ", value);
}

操作步骤：

就是css媒体查询直接用，在iOS中不生效

预期结果：

css媒体查询需要生效

@media (prefers-color-scheme: dark) {

}

实际结果：

目前不生效

@media (prefers-color-scheme: dark) {

}

bug描述：

如题，在uniapp， iOS中的 @media (prefers-color-scheme: dark) {}不生效，uni.onThemeChange也不回调，通过HBuildx运行或者离线打包方式上面两个api都不生效

"app-plus" : {  
        "darkmode": true  
}

已经设置过darkmode

2026-02-03 16:18 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

作为 DCloud 官方人员，对该 bug 反馈做如下评审：

反馈完整性
- 标题、描述、代码示例、复现步骤、预期/实际结果、分类信息（平台、版本、机型等）均已提供，信息基本完整。
- 但缺少可直接运行的最小复现 demo（仅给出片段），官方仍需自行搭架子验证。
- 未说明测试时是否确实在「系统设置 → 显示与亮度」里切换了深浅模式，也未确认 manifest.json 是否完整配置 "app-plus": { "darkmode": true } 及 "darkmode": true（根级）。这两点常导致误判。
是否误报 / 已知限制
根据知识库：
- onThemeChange 兼容性明确写着「iOS 平台自定义基座生效」。若用户使用的是标准运行基座，则不会触发回调，这属于文档已注明的限制，并非 bug。
- DarkMode 适配指南显示 prefers-color-scheme 在 App 端需同时满足：
  1. manifest.json 中 "app-plus": { "darkmode": true }
  2. 根级 "darkmode": true
  3. iOS 需使用自定义基座或离线包（标准基座未开启暗黑模式）。
    因此若用户仅用标准基座测试，则两种现象均符合预期，不属于缺陷。
版本检查
用户 HBuilderX 为「正式版」，当前最新正式版为 4.87，用户未说明具体小版本。如低于 4.87，建议先升级至最新正式版后再验证。
建议补充信息
- 请提供可完整运行的最小 demo（含 manifest.json）。
- 明确测试步骤：
  ① 使用自定义基座或离线 ipa；
  ② 在系统设置里手动切换深浅模式；
  ③ 观察回调与样式是否生效。
- 若仍有问题，请贴出真机运行日志（含 onThemeChange 触发记录）。
结论
当前反馈大概率属于「未使用自定义基座」导致的已知限制，而非框架 bug。请按上述补充信息后再行验证；如确认已满足所有前置条件仍复现，可再提交带 demo 与日志的新 issue。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

【报Bug】uniapp， iOS中的 @media (prefers-color-scheme: dark) {}不生效，uni.onThemeChange也不回调；

示例代码：

@media (prefers-color-scheme: dark) {

}

onMounted(() => {
uni.onThemeChange(darkThemeChange);
});

onUnmounted(() => {
uni.offThemeChange(darkThemeChange);
});

function darkThemeChange(value) {
console.log("onThemeChange 系统主题切换 === ", value);
}

操作步骤：

就是css媒体查询直接用，在iOS中不生效

预期结果：

css媒体查询需要生效

@media (prefers-color-scheme: dark) {

}

实际结果：

目前不生效

@media (prefers-color-scheme: dark) {

}

bug描述：

1 个回复

公告

相关问题

【报Bug】uniapp， iOS中的 @media (prefers-color-scheme: dark) {}不生效，uni.onThemeChange也不回调；

示例代码： @media (prefers-color-scheme: dark) { } onMounted(() => { uni.onThemeChange(darkThemeChange); }); onUnmounted(() => { uni.offThemeChange(darkThemeChange); }); function darkThemeChange(value) { console.log("onThemeChange 系统主题切换 === ", value); }

操作步骤： 就是css媒体查询直接用，在iOS中不生效

预期结果： css媒体查询需要生效 @media (prefers-color-scheme: dark) { }

实际结果： 目前不生效 @media (prefers-color-scheme: dark) { }

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

示例代码：

@media (prefers-color-scheme: dark) {

}

onMounted(() => {
uni.onThemeChange(darkThemeChange);
});

onUnmounted(() => {
uni.offThemeChange(darkThemeChange);
});

function darkThemeChange(value) {
console.log("onThemeChange 系统主题切换 === ", value);
}

操作步骤：

就是css媒体查询直接用，在iOS中不生效

预期结果：

css媒体查询需要生效

@media (prefers-color-scheme: dark) {

}

实际结果：

目前不生效

@media (prefers-color-scheme: dark) {

}