uni-app 苹果暗黑模式下uni.showToast弹窗背景和文字颜色都为白色

uni-app 苹果暗黑模式下uni.showToast弹窗背景和文字颜色都为白色

示例代码：

    title: '该课程直播还未开始',  
    duration: 2000,  
    icon: 'none'  
});

操作步骤：

  1. uni.showToast({ title: '未开始', duration: 2000, icon: 'none' });
  2. 苹果手机运行，（应该只有系统版本是13以上的设置暗黑模式）

预期结果：

暗黑模式下希望字体颜色可以显示为黑色

实际结果：

暗黑模式下希望字体颜色可以显示为黑色

bug描述：

苹果手机开启暗黑模式 uni.showToast弹窗背景是白色的，里面的文字也看不见，当前页面为nvue页面，苹果正常模式和安卓手机显示的都是正常的黑底白字。

示例图片

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 10.0.19042 内部版本 19042
HBuilderX类型 正式
HBuilderX版本 3.1.22
手机系统 iOS
手机系统版本 iOS 13.2
手机厂商 苹果
手机机型 iPhone12
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 苹果暗黑模式下uni.showToast弹窗背景和文字颜色都为白色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

有解决这个问题吗？我这打包成wgt应用showToast同样是这个问题

更多关于uni-app 苹果暗黑模式下uni.showToast弹窗背景和文字颜色都为白色的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的项目只是弹窗哪儿有受到深色模式影响，所以我使用plus.nativeUI.setUIStyle(“light”);强制设置ios为浅色模式了，治标不治本，希望有好的解决方案望回复

这是一个已知的 iOS 暗黑模式适配问题。在 iOS 13+ 的暗黑模式下，uni.showToast 组件未能正确响应系统主题变化，导致背景和文字颜色都为白色，造成文字不可见。

解决方案：

  1. 自定义样式（推荐） 使用 uni.showModal 或自定义组件替代，通过 CSS 媒体查询适配暗黑模式：

    [@media](/user/media) (prefers-color-scheme: dark) {
  .custom-toast {
    background: #333;
    color: #fff;
  }
}

  2. 条件判断主题 在调用 uni.showToast 前检测系统主题：

    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
uni.showToast({
  title: '该课程直播还未开始',
  duration: 2000,
  icon: 'none',
  image: isDark ? '/static/toast-dark.png' : '' // 可选图标适配
});

  3. 全局样式覆盖 在 App.vue 中强制设置 Toast 样式：

    uni-toast {
  background-color: rgba(0,0,0,0.8) !important;
  color: #fff !important;
}
回到顶部