Android Dark-Mode, Camera preview not showing

[bezrodnow]

Describe the bug When the app is running on Android-Dark-Mode the camera will not be visible compared to when run in light mode it is.

To Reproduce Any App running in Android Dark Mode (recreated on multiple real devices)

Expected behavior A clear and concise description of what you expected to happen. The Camera should be visible even in Dark Mode

Version [3.0.0]

Smartphone (please complete the following information):

• Device: Huawei Honor 10 & One Plus 8T
• OS: Android 10

Additional context If i switch to light-mode while the app is open, the camera is visible, if i switch back while the app is open it is not visible anymore only a black screen.

[thegnuu]

@MerOderWenigerLin this is not an issue caused by the plugin itself. I guess you are using ionic based on the error, ionic will add some css variables on some DOM-elements (like --ion-background) or something which will add a background on dark mode on Android. You need to make sure that your DOM structure is ready for the plugin, this is unfortunately nothing the plugin can do properly by itself for all possible use-cases....

There is a PR open to better handle this error, unfortunately this might lead to problems for people using other frameworks so I have to find a "better" way to handle "issues" like this which will not be possible in a general matter.

[bezrodnow]

Thanks for the reply, and sorry for the wrong bug report. Thanks to you, I could fix it.

[thegnuu]

No worries! Ionic behaves a bit weird an I am used to this issue ;) I think adding some FAQ or something once I find the time will help :)

Glad you were able to resolve your issue!

[david-it]

I'm having the exact same issue but I've found a workaround that works (Ionic 6.2.3, Capacitor 4.1.0, Android 12).

In dark mode the body gets a '--ion-background-color' that I cannot manage to remove dynamically via scss. But forcing the style property via javascript seems to work fine:

document.body.style.setProperty('--ion-background-color', 'transparent');

Tested on a Samsung S10 (Android 12).

Probably this would work also for issues #144 and #118.

To my understanding the method BarcodeScanner.hideBackground() should work, but just returns undefined in my case and does not seem to do anything.

[thegnuu]

Hide background will work as expected, unfortunately ionic will add styles on a higher DOM element than the body which will use the variable --ion-background-color that will overwrite those changes and basically make them useless....

I am working on a newer version which will not expose the hideBackground function since the name is a bit confusing and the function will be called internally anyways so it is basically not required to provide this function to the devs.