[BUG]: Arabic text displayed in images is not clearly visible in dark mode

[KolliAnitha]

Describe the bug Arabic text displayed in images is not clearly visible in dark mode

To Reproduce Steps to reproduce the behavior: Enable dark mode

1. Go to 'Place Values' - What are the place values
2. Click on 'Continue' till you go the question page with What place is digit 8 in1489
3. See text in image

Expected behavior The Arabic text in image must be clearly visible in dark mode

Demonstration

Environment Device/emulator being used: Infinix SMART 5 Android or SDK version (e.g. Android 5 or SDK 21): Android 11 App version (you can get this through system app settings or via the admin controls menu in-app): 0.11-beta-8c81c98d8b

[MohitGupta121]

@KolliAnitha Thanks for filing this issue, actually the images issue in Dark-Mode is already known. I have discussion with @BenHenning regarding this and he suggests me that we not going with separate images for dark-mode from backend. We using color inversion for these images.

So to get more context on this particular color inversion things and other possible solution, Ben suggest me to talk to @rt4914 as he already done RND on this.

[rt4914]

@MohitGupta121 The only solution that I can think of here is that we should create images in such a way that they support light and dark theme both. Earlier I had thought of two solutions (1.) Separate image for dark-mode - which is definitely not a good approach and (2.) setting background for these images in html-parser based on light and dark theme but that can also create issues if the the image itself contains the color which we are setting as background.

Therefore the best solution is to create images that support both light and dark mode. Some thoughts about that approach:

• If we have background for images then it will work correctly, transparent background creates the issue
• If we are using transparent background than image should not contain light-blue, grey and black color which we use as background colors in light and dark mode both.

[MohitGupta121]

Okay @rt4914 thank you, for this explanation. I'll implement that.

[BenHenning]

So it seems that the main problem is how to handle cases when the image background is transparent. Given that we already are including a background implicitly in these cases for light mode (i.e. white), perhaps we could just always render a white background to match light mode. It might make the images uncomfortably bright in some cases, but it at least ensures that they're always readable. In cases when the images don't have transparent backgrounds then the white background wouldn't show up (since it'd be overwritten). In this way we can at least ensure legible parity between night & day modes.

[BenHenning]

To clarify on the above, I assume that changes will be needed in UrlImageParser to pre-fill a white background before rendering drawables. This should cover all HTML image rendering scenarios.

Note: there may be some additional blending settings that need to be set in the Paint object when trying to draw (to ensure that the transparent pixels of the image blend with the background rather than overwrite them).

[MohitGupta121]

@BenHenning @adhiamboperes I unable to reproduce this issue with production assets. Thanks. Here is screen recording and screenshot:

https://github.com/oppia/oppia-android/assets/76530270/07ee82eb-5b96-4db4-885b-d144c1c5cb03

[MohitGupta121]

@KolliAnitha could you please verify this issue again on your test device. Is this issue is still exists? Thanks!

[MohitGupta121]

@seanlip can you please contact product team or @KolliAnitha regrading this particular issue because I unable to reproduce? Thanks!

[seanlip]

Hi @MohitGupta121, I think this should be fine if you can't repro it. Let's close this and we can reopen it if it occurs again -- I think your videos are sufficient proof. Thanks!

[adhiamboperes]

Reopening because this issue still occurs in some devices. @subhajitxyz, reported on Oppo Reno 2f, Android 11.