Problems running my project on device

Ionic Framework
1

My project is working perfectly as a website and in the emulator, but on my personal device the problem described in the image occurs.
The background is not displaying correctly and the characters typed in the inputs do not appear. No problem appears in the Logcat or in the inspect, I don’t know where to start looking, any tips?

BUG
BUG2364×1140 215 KB 

{
  "name": "birds-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "resources": "cordova-res ios && cordova-res android && node scripts/resources.js"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~13.2.3",
    "@angular/core": "~13.2.3",
    "@angular/forms": "~13.2.3",
    "@angular/platform-browser": "~13.2.3",
    "@angular/platform-browser-dynamic": "~13.2.3",
    "@angular/router": "~13.2.3",
    "@auth0/angular-jwt": "^5.0.2",
    "@balkangraph/familytree.js": "^1.2.16",
    "@balkangraph/orgchart.js": "^8.2.30",
    "@capacitor/android": "^3.2.4",
    "@capacitor/app": "1.0.3",
    "@capacitor/camera": "^1.2.0",
    "@capacitor/core": "^3.2.4",
    "@capacitor/haptics": "1.0.3",
    "@capacitor/ios": "3.5.1",
    "@capacitor/keyboard": "1.0.3",
    "@capacitor/share": "^1.0.7",
    "@capacitor/status-bar": "1.0.3",
    "@fortawesome/angular-fontawesome": "^0.10.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@ionic/angular": "^6.0.1",
    "@ionic/angular-toolkit": "^6.1.0",
    "@ionic/pwa-elements": "^3.0.2",
    "@ionic/storage-angular": "^3.0.6",
    "chart.js": "^3.7.1",
    "chartjs-plugin-datalabels": "^2.0.0",
    "express": "^4.18.1",
    "file-saver": "^2.0.5",
    "ionic-selectable": "^4.9.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "ng2-charts": "^3.0.9",
    "ngx-image-cropper": "^6.0.2",
    "ngx-org-chart": "^1.1.1",
    "rxjs": "7.4.0",
    "swiper": "^7.0.6",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.4",
    "@angular-eslint/builder": "~13.1.0",
    "@angular-eslint/eslint-plugin": "~13.1.0",
    "@angular-eslint/eslint-plugin-template": "~13.1.0",
    "@angular-eslint/template-parser": "~13.1.0",
    "@angular/cli": "~13.2.4",
    "@angular/compiler": "~13.2.3",
    "@angular/compiler-cli": "~13.2.3",
    "@angular/language-service": "~13.2.3",
    "@capacitor/cli": "3.2.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.5.5"
  },
  "description": "An Ionic project"
}
2

Is dark mode enabled on the device? Maybe that explains the background as well as white characters not showing on a white styled input?

3

The dark mode is disabled. Looks like dark mode is only being applied to my app.

4

Try to delete the following media query and its content from your themes/variables.scss the fix the background:

@media (prefers-color-scheme: dark) {
  ...
}

To fix the input, try to put the ion-input into an ion-item:

<ion-item>
  <ion-label position="stacked">Email</ion-label>
  <ion-input type="email"></ion-input>
</ion-item>