Capacitor: iOS 13 dark mode not working on real device

[stripathix]

Description of the problem:

Affected platform

• [ ] Android
• [#] iOS
• [ ] electron
• [ ] web

OS of the development machine

• [ ] Windows
• [#1912 ] macOS
• [ ] linux

Other information:
I have added dark mode support in my Ionic app using below code. This works well on the device when the website is opened in safari.

Also, it works when I run the application in the simulator iOS 13.

But when running the application as a capacitor application. Media query prefers-color-scheme: dark has no effect at all.

@media (prefers-color-scheme: dark) {
  :root {

    --ion-border-color: var(--ion-color-dark-shade);
    --ion-background-color: var(--ion-color-dark);
    --ion-background-color-rgb: var(--ion-color-dark-rgb);
    --ion-text-color: var(--ion-color-light);
    --ion-text-color-rgb: var(--ion-color-light-rgb);

    --ion-color-step-50: #232323;
    --ion-color-step-100: #2e2e2e;
    --ion-color-step-150: #3a3a3a;
    --ion-color-step-200: #454545;
    --ion-color-step-250: #515151;
    --ion-color-step-300: #5d5d5d;
    --ion-color-step-350: #8b8b8b;
    --ion-color-step-400: #747474;
    --ion-color-step-450: #7f7f7f;
    --ion-color-step-500: #8b8b8b;
    --ion-color-step-550: #979797;
    --ion-color-step-600: #a2a2a2;
    --ion-color-step-650: #aeaeae;
    --ion-color-step-700: #b9b9b9;
    --ion-color-step-750: #c5c5c5;
    --ion-color-step-800: #d1d1d1;
    --ion-color-step-850: #dcdcdc;
    --ion-color-step-900: #e8e8e8;
    --ion-color-step-950: #f3f3f3;
  }
    .svg-container{
      background: #fff;
      color: #000;
    }
    .custom-divider{
      background-color: var(--ion-background-color);
    }
    .long-desc-workshop *{
      background-color: var(--ion-background-color) !important;
    }
    .action-sheet-group.sc-ion-action-sheet-md:first-child,
    .action-sheet-group.sc-ion-action-sheet-md:last-child,
    .action-sheet-button.sc-ion-action-sheet-md,
    .action-sheet-button.activated.sc-ion-action-sheet-md{
      background: var(--ion-background-color);
    }
}

Capacitor version:

        "@capacitor/android": "1.1.1",
        "@capacitor/cli": "1.1.1",
        "@capacitor/core": "1.1.1",
        "@capacitor/ios": "1.1.1",

[busernet]

I'm seeing the same problem +1

[jcesarmobile]

Can you provide a sample app?

[stripathix]

Hi @jcesarmobile ,
Here is a sample app.
https://github.com/stripathix/ionic-vue

Please let me know if have any issue with this.

Thanks

[stripathix]

Hey @jcesarmobile, did you got chance to look into it?

[stripathix]

Got it working

[derek90]

Got it working

How?