CODEWITHSUNDEEP
cordovaionic-frameworkcordova-pluginscapacitorionic-react
Byurhan Beyzat
Byurhan Beyzat

Reputation: 61

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

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

Upvotes: 1

Views: 1794

Answers (2)

almo
almo

Reputation: 6387

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'">

Upvotes: 0

dom.macs
dom.macs

Reputation: 796

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.

Upvotes: 1

Related Questions