Ionic Capacitor QR Scanner手机系统深色模式下黑屏问题求助

核心原因是系统全局深色模式下，Ionic会自动为根组件、页面注入深色主题背景值，你当前仅为IonPage和IonContent添加的透明样式没有覆盖到上层根元素，导致相机预览层被暗色背景遮挡。按以下步骤操作即可修复：

• 第一步：在全局样式文件（通常为variables.scss或global.scss）中添加全层级背景透明样式，同时适配深色模式媒体查询：

/* 适配系统深色模式下的强制透明 */
@media (prefers-color-scheme: dark) {
  body.cameraView,
  ion-app.cameraView,
  ion-page.cameraView,
  ion-content.cameraView {
    background: transparent !important;
    background-color: transparent !important;
    --background: transparent !important;
    --ion-background-color: transparent !important;
    --ion-background-color-rgb: transparent !important;
  }
}
/* 通用模式下的透明样式 */
.cameraView {
  background: transparent !important;
  background-color: transparent !important;
  --background: transparent !important;
  --ion-background-color: transparent !important;
  --ion-background-color-rgb: transparent !important;
}

• 第二步：扫码页面挂载时，给Ionic根元素ion-app也添加cameraView类，页面卸载时移除，避免影响其他页面的样式：

import { useEffect } from 'react';

const QrScanPage = () => {
  useEffect(() => {
    const ionAppRoot = document.querySelector('ion-app');
    ionAppRoot?.classList.add('cameraView');
    // 页面销毁时移除样式
    return () => {
      ionAppRoot?.classList.remove('cameraView');
    };
  }, []);

  // 剩余页面业务逻辑
  return <></>
};

• 第三步：如果端侧仍有黑屏问题，在capacitor.config.json中添加配置，禁用WebView的自动深色模式转换：

{
  "ios": {
    "disableDarkMode": true
  },
  "android": {
    "disableDarkMode": true
  }
}

• 额外排查点：确认扫码逻辑中已正确调用QR Scanner实例的show()方法，且已获取相机使用权限。

内容的提问来源于stack exchange，提问作者Byurhan Beyzat