CODEWITHSUNDEEP
cssionic-frameworkdisabledarkmode
Antreas Apostolou
Antreas Apostolou

Reputation: 325

How to disable dark mode in Ionic App for android and ios?

I've built an app using Ionic, Angular and Capacitor and I'm facing some UI issues when dark mode is enabled in certain cases and devices. More specifically i faced the issue in Xiaomi android devices (Redmi note 9). After some research I found out that Xiaomi is using MIUI which is forcing the dark mode when is available to be applied in the App no matter what. I found some solutions but they didn't work for me.

The one solution suggests to add in index.html the following meta tag in order to always force the app tho use the light theme.

  <meta name="color-scheme" content="light" />

The other solution i found is to edit variables.scss and comment out the media query referring to dark mode as follows:

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

Neither solutions work. I am open to any solutions out there :)

Upvotes: 2

Views: 4946

Answers (1)

Berkay Yıldız
Berkay Yıldız

Reputation: 33

For iOS, changing meta in index.html does not work. Removing css variables for dark mode (the second solution) should actually work but when you do that iOS still thinks that app in dark mode and show status bar in white text thus user can not read status bar.

Best way to force it is doing by the native approach. Just add this lines to Info.plist file and iOS will only present the app in light mode regardless of users system preference.

<key>UIUserInterfaceStyle</key>
<string>Light</string>

For Android changing meta color-scheme content to only light should work but if not you may modify styles.xml and remove relevant lines with dark mode. Just like your case some android devices tries to convert light mode apps to dark themself, to avoid this you can add this lines to the same file.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:forceDarkAllowed">false</item>
</style>

Upvotes: 1

Related Questions