Help with cordova-plugin-qrscanner / How to make your app completely transparent



I recently came across this new qr-scanner plugin: It looks very interesting because it allows you to add your own custom HTML/CSS overlay. However, I’m having a hard time getting it to work with Ionic.

When I start the scanner, it starts in the background (behind the app) and scans codes successfully. However, I cannot see the camera itself because the app is “on top of it”. Just to see if it’s working, I added the “background-color: transparent” style to all elements on the page using this method: Then I was able to see the camera, but obviously the app is unusable after that.

I tried to find the element(s) that need to be made transparent using the dev tools on chrome, but somehow I was unable to figure it out. So my question is: How do I make one page in my app completely transparent while keeping everything else working?

Thanks a lot for your help!


+1 on this. Having the same issue using CameraPreview plugin.


I found an article that describes how to use the CameraPreview plugin here:

This goes into the right direction, but it only works when I manually set the styles in the scss files. I’m still looking for a way to do this while the app is running (using selecting the elements with js and setting their background to transparent didn’t work for some reason)


Add the following lines into src/theme/variables.scss:

// Shared Variables
$background-color: transparent;

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$content-ios-transition-background: transparent;

They make background of app transparent.