Angular/Ionic App Shows Black Screen with Xiaomi Dark Mode

Ionic Framework Ionic Angular
1

Hey everyone,

I’m having an unusual issue with my Angular/Ionic app when it is used on Xiaomi devices, like the Poco X3 Pro or Poco F3. Whenever the phone is set to Native dark mode, the app UI automatically switches to a heavy dark blank screen. I have not applied any CSS specifically for dark mode, so this was unexpected.

For example, some boxes turn black, text colors switch from black to white, and even images appear inverted, which makes the app look pretty odd.

Has anyone else come across this blank black screen issue with Xiaomi devices in dark mode? Any tips on how to fix or work around this would be really appreciated!

Thanks!

2

Hey everyone,

I’ve noticed an issue where my Angular/Ionic app displays a black screen when Xiaomi’s Dark Mode is enabled. This seems to be a common problem with Xiaomi devices due to how they handle dark mode at the system level, forcing apps into dark mode even when they’re not fully compatible.