Syl.H
Syl.H

Reputation: 259

Android system overwrites bright colors in dark mode. Xamarin.Forms

Users of an app of mine asked for a dark mode. The app is made with Xamarin.Form (v.5). So I've implemented a control to switch form Dark Mode/Light Mode in the app.

So the app can be in dark mode or light mode but the Android phone can also be in dark mode or light mode. Then, we have 4 possibilities:

Everything is working fine for the 3 first scenarios above. But the last one is not working properly. (For info, iOS can handle the 4 scenarios without issue).

I put the background in yellow to debug and I've realised the background was yellow alright, but Android was using a darker version of the yellow color. Like if android was automatically adding a filter or changing the opacity of this background.

So I've made more tests and it appears that if your phone is in Dark Mode, Android system will automatically darken bright colors if those ones are used in a too big surface. In dark mode you can have a white or yellow button, but you cannot have a white or yellow background.

Here are some screenshots

enter image description here

enter image description here

enter image description here

enter image description here

And the implementation of the color modes is:

enter image description here

enter image description here

So my question is: can we disable this behavior to make the bright colors bright even when the phone is using dark mode?

Upvotes: 3

Views: 1122

Answers (1)

Syl.H
Syl.H

Reputation: 259

I've tested on different devices and this happens only on Xiaomi (and probably similar brands). When you enable the Dark Mode, a new menu appears: "More Dark mode options". There you can switch off "Adjust text and backgrounds automatically" to resolve the issue. (see screenshots)

As far as I know I cannot control these extra settings in Xamarin so as most of users won't be impacted, I will go ahead with my code and add an extra note in case some users experience similar issue.

Thanks

enter image description here enter image description here

Upvotes: 4

Related Questions