QR Scanner black screen on DARK MODE

Hi,

I’ve problems with QR Scanner on 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.

I add this class name to IonPage and IonContent

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

"dependencies": {
    "@capacitor/android": "3.2.2",
    "@capacitor/app": "1.0.3",
    "@capacitor/core": "3.2.2",
    "@capacitor/haptics": "1.0.3",
    "@capacitor/ios": "^3.2.2",
    "@capacitor/keyboard": "1.0.3",
    "@capacitor/network": "^1.0.3",
    "@capacitor/push-notifications": "^1.0.4",
    "@capacitor/status-bar": "1.0.3",
    "@ionic-native/fingerprint-aio": "^5.36.0",
    "@ionic-native/native-storage": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic/react": "^5.7.0",
    "@ionic/react-router": "^5.7.0",
    "@ionic/storage": "^3.0.6",
    "aes256": "^1.1.0",
    "cordova-plugin-fingerprint-aio": "^4.0.2",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "es6-promise-plugin": "^4.2.2",
    "i18next": "^20.4.0",
    "i18next-resources-to-backend": "^1.0.0",
    "ionicons": "^5.4.0",
    "jetifier": "^2.0.0",
    "node-sass": "^6.0.1",
    "react": "^17.0.1",
    "react-circular-progressbar": "^2.0.4",
    "react-dom": "^17.0.1",
    "react-hook-form": "^7.15.0",
    "react-i18next": "^11.11.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "recheck-clientjs-library": "^1.0.23-beta.1",
    "swiper": "^6.8.4"
  },
  "devDependencies": {
    "@capacitor/cli": "3.1.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.15",
    "@types/react": "^16.14.3",
    "@types/react-dom": "^16.9.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jest": "^24.4.0",
    "eslint-plugin-json": "^3.0.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.2",
    "prettier-eslint": "^13.0.0",
    "typescript": "^4.1.3"
  },```

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

1 post - 1 participant

Read full topic