QR scanner camera is not preview (showing black screen) in dark mode

[bavanig]

HI, I am using ionic cordova plugin add cordova-plugin-qrscanner npm install @ionic-native/qr-scanner It is loading correctly,Its working fine with light mode.but properly not working in dark mode. In dark mode I was able to scan a qr code. But I cannot get the video preview to display. I applied background:none transparent on all of them, but still no preview is shown. Can anyone gimme a clue please ?

[grapix]

Hi @bavanig, you could try to set the dark mode background color to "transparent" or "none". Here is an example:

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

  html.yourClassAddedIfScannerIsVisible { // change class name

    background: transparent none !important;

    body, ion-app, .modal-wrapper, .ion-page {
      background: transparent none !important;
      --ion-background-color: none; // this is important
    }

    ion-content {
      --background: var(--ion-background-color, transparent);
    }

    app-behindModal { // change node name
      visibility: hidden;
    }

  }

}

[manfield]

Hi @bavanig, did you manage to solve this someway? I've the same identical issue, on a Cordova app.

[manfield]

Hi, I find a way to workaround this issue. I put in file QRScanner.java, line 473 the following instruction:

webView.getView().setBackgroundColor(Color.TRANSPARENT);

It forces the background color to be transparent Actually the preview is black because the webView re-paint its background black. Forcing back to transparent makes the job.

[insel-maz]

There is a fork which now uses Color.TRANSPARENT from version 3.0.3. npm i cordova-plugin-qrscanner-codaxy

[Ezyger]

When I add this command "webView.getView().setBackgroundColor(Color.TRANSPARENT);" in VS Code and build for android studio, the command disappears. Anyone have a solution for this?

[Gyros007]

My workaround was to change the line in the QRScanner.java

webView.getView().setBackgroundColor(Color.argb(1, 0, 0, 0)); to webView.getView().setBackgroundColor(Color.argb(0, 0, 0, 0));

[bavanig]

Hi Everyone, Sorry for the late reply. You will get a perfect working scanner in dark as well as the light mode by following the steps in the below link. Please refer to this link. https://devdactic.com/pwa-qr-scanner-ionic/

My sample app & Code Ref: APK FIle: https://drive.google.com/file/d/1K3xoOooZcMutxlYCKEgv6bL5kP29e5Di/view?usp=sharing Source code ; scanner (1).zip

[bavanig]

yaa @manfield .i solve that issue. please refer to this link https://devdactic.com/pwa-qr-scanner-ionic/

My sample app & Code Ref: APK FIle: https://drive.google.com/file/d/1K3xoOooZcMutxlYCKEgv6bL5kP29e5Di/view?usp=sharing Source code ; scanner (1).zip

[JustDoItSascha]

The problem in this plugin is not really fixed, is it? Because the link points to a documentation with a pwa and something completely different.

[Webiers]

mine was not visible because of DARK MODE in phone setting is enabled

[SergioVazquezDev]

I fixed this when updated to cordova android 10.1.0

cordova platform remove android
cordova platform add android@10.1.0