Ionic Capacitor QR Scanner black screen on DARK MODE set from phone itself

Question

I've problems with QR Scanner on DARK MODE the screen is black on light mode with some css tweaks it's working but not on dark mode selected from the device itself not from app.

Used plugin: https://github.com/bitpay/cordova-plugin-qrscanner

I add this class name to IonPage and IonContent

.cameraView {
  background: transparent;
  background-color: transparent !important;
  --background: transparent !important;
  --ion-background-color: transparent !important;
}

Ionic:

   Ionic CLI       : 6.17.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.7.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.2.2
   @capacitor/core    : 3.2.2
   @capacitor/ios     : 3.2.2

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.4.1) : 1.4.0

System:

   NodeJS : v16.3.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/bin/node)
   npm    : 7.21.1
   OS     : macOS Big Sur

dom.macs · Answer 1 · 2021-09-09T04:51:09.530

1

There is an issue that was raised in their github about this but it's still open so I'm guessing they haven't fixed this yet. You can try to check through this link and see their workarounds.

One of the possible workaround mentioned was to set the background mode manually in the QRScanner.java at line 473 with the code below.

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

Note: If you are open to changing the plugin, I suggest you try Ionic Native Plugin BarcodeScanner instead.

edited Sep 09 '21 at 04:51

answered Sep 09 '21 at 00:04

dom.macs

776
7
15

I saw this workaround but it's not worked for me but I will try it again later today. I've tried barcodescanner too but it's not able to customize the ui (texts/buttons,etc) I don't like it much – Byurhan Beyzat Sep 09 '21 at 07:28

score 0 · Answer 2 · answered Mar 31 '23 at 15:10

The problem is that dark mode sets the body background color to black. When scanning the QR code you can make the body color transparent but that means that your entire app becomes transparent.

So first I went to variables.css and made sure that not the body itself, but only all the elements inside become black in dark mode:

.md body > * {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18,18,18;
}

Then remove the background-color from the .md body { part.

Now you can simples change the ion-content background color to transparent while scanning, for example like this:

<ion-content color="{{ is_scanning ? '' : 'light' }}" [style.--background]="is_scanning ? '#00000000' : '#fff'">

Ionic Capacitor QR Scanner black screen on DARK MODE set from phone itself

2 Answers2