In dark mode for few of the questions the partition in milk portions is not clearly visible in what is a ratio chapter

[KolliAnitha]

Describe the bug
In dark mode for few of the questions the partition is not clearly visible in what is a ratio chapter

To Reproduce
Enable dark mode
Steps to reproduce the behavior:

1. Go to 'What is a Ratio' chapter in Ratios and Proportional Reasoning topic
2. Click on Continue till you reach the question which of the following pictures show a 3:2 ratio of orange puree to milk
3. See screen

Expected behavior
In dark mode the partition in milk portions should be clearly visible for users

Demonstration

Environment
Device/emulator being used: Oneplus nord2 5g
Android or SDK version (e.g. Android 5 or SDK 21): Android version 12
App version (you can get this through system app settings or via the admin controls menu in-app): 0.10-beta-5e64fae55e

[BenHenning]

I think we'll either need to invert the colors for content images when using dark mode, or put a lighter background behind the images while in dark mode to ensure sufficient contrast. A longer term solution might be to have dark mode-specific assets for lessons, but this will double the number of assets needed to be produced & maintained by the team, and largely affects Android exclusively. It would be much better to try and find a general solution, instead.

@MohitGupta121 @rt4914 do you have any thoughts?

[rt4914]

@BenHenning I do think your approach is correct here. The best solution for our case would be to invert the colors.

@MohitGupta121 As discussed, can you look into this. The solution should be such that it should apply to png as well as svg files, ideally.

Maybe this can help #3122

[rt4914]

Maybe we will somehow from code turn on "Invert Color" option for user in dark mode.

[ShubhadeepKarmakar]

Device: Redmi Note 9pro

Everything is fine in dark mode.

[rt4914]

Dark Mode - OFF and Invert Colors - OFF

Dark Mode - ON and Invert Colors - OFF

Dark Mode - OFF and Invert Colors - ON

Dark Mode - ON and Invert Colors - ON

Device used: Motorola G60
Android Version: 12

Based on this I think we actually don't need to solve this as it might create issues for other images too. Or if want to solve this then also we should observe it on multiple devices and across multiple questions.

@MohitGupta121 Can you generate similar images and post it here?

[MohitGupta121]

Dark Mode - OFF and Invert Colors - OFF

Dark Mode - ON and Invert Colors - OFF

Dark Mode - OFF and Invert Colors - ON

Dark Mode - ON and Invert Colors - ON

Device used: Poco X2
Android Version: 11

@rt4914 Please look at my images how is it?

[rt4914]

@MohitGupta121 from the screenshots it looks like that the dark-mode mocks are working correctly.

@BenHenning IMO, lets keep this issue open and if possible test it on more device and get more results especially Redmi Note 9 pro and once we can confirm across multiple devices then we can take final conclusion.

[MohitGupta121]

Okay Thanks @rt4914 I try to get results from multiple devices. And also try to get results from Redmi Note 9 pro in my connections.

[MohitGupta121]

@BenHenning IMO, lets keep this issue open and if possible test it on more device and get more results especially Redmi Note 9 pro and once we can confirm across multiple devices then we can take final conclusion.

@rt4914 I think we have to get screenshots from Oneplus nord2 5g as we see @KolliAnitha having issue in that device instead of Readmi note 9 ?

[KolliAnitha]

The image i took are with Dark mode-ON and Invert color mode - ON. But however, with only dark mode on are the partitions clearly visible.

[MohitGupta121]

The image i took are with Dark mode-ON and Invert color mode - ON. But however, with only dark mode on are the partitions clearly visible.

Thanks @KolliAnitha

So from this screenshot it's clear that this is issue is not part of Dark Mode.

@rt4914 now we can close this issue as not part of dark-mode because this issue is separate related to Invert color?
As you suggests in mail.

[rt4914]

Considering that this issue is only because of invert-colors and does work correctly when dark-mode is on. Closing it as the implementation is correct.