bug: Android does not toggle between dark & light mode while app is open

[tetsuwanadam]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

When opening an Ionic app in Android, the app theme accurately matches the system setting for dark or light mode. And when switching the mode for the first time the Ionic app changes accordingly. But from the 2nd time onward the Ionic app doesn't change between dark or light mode to match the system setting. Also, the color in the system tray never changes to match the system's dark or light mode setting once the app has been opened.

Expected Behavior

When you change the Android dark or light mode setting, the Ionic app theme should switch accordingly (no matter how many times it changes while open), and the system tray color should change as well.

Steps to Reproduce

• Create a new Ionic app and run it on an Android device.
• Switch from dark to light mode or vice versa. (The first time, the app theme will change accordingly, however the system tray color won't.)
• Switch from light to dark mode or vice versa again. (Neither the app theme nor the system tray color will change.)

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.2.1

Capacitor:

Capacitor CLI : 4.0.1 @capacitor/android : 4.0.1 @capacitor/core : 4.0.1 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.6.0

System:

NodeJS : v16.1.0 (/usr/local/bin/node) npm : 8.16.0 OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Ionic Framework does not manage switching between light and dark modes, so it is unlikely that this is an Ionic Framework bug. I see you are using Capacitor 4. Have you followed the DayNight migration steps on the Capacitor 4 update guide? https://capacitorjs.com/docs/updating/4-0#optional-use-a-daynight-theme

That should give you the light/dark mode behavior you are looking for.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!