Force Dark System UI

[skyeewers]

Hey there,
I was wondering how I could "force" the native wrapper around my iOS and Android app to always display native UI elements in dark mode. So, for example, image upload dialogs and the system keyboard are currently coming up in their normal, light style. My app is entirely dark so I'd appreciate if there was some way to force dark versions of these UI elements to always appear.

How would I go about that with the current version of capacitor?

[ikeith]

By default the apps will inherit the system setting but you can force them into either light or dark mode (which should apply to all system components like the keyboard).

For iOS, add the UIUserInterfaceStyle key to the app's info.plist

For Android, you can call an API to do that from an appropriate place in the native code.

[imhoffd]

Does it make sense for this to be a feature in Capacitor?

[ikeith]

It probably depends on how many apps might need it. Most end-users, I would think, expect apps to respect the system setting.

On iOS, setting the info.plist key is the easiest option but that doesn't extend well to being configurable (except when adding a platform). Supporting the option at runtime is less trivial because you can use overrideUserInterfaceStyle on containers (windows, view controllers, views) but then you need to keep it in sync with the status bar, new windows etc.

And changing it at runtime for iOS or Android runs the risk of breaking the app in an embedded context.

It might be best to simply document what to do in a note.