Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dark theme make colors of the images distorted #3122

Closed
prayutsu opened this issue Apr 27, 2021 · 4 comments · Fixed by #4786 or #5141
Closed

Dark theme make colors of the images distorted #3122

prayutsu opened this issue Apr 27, 2021 · 4 comments · Fixed by #4786 or #5141
Assignees
@MohitGupta121
Labels
bug End user-perceivable behaviors which are not desirable. Impact: Medium Moderate perceived user impact (non-blocking bugs and general improvements). Work: Low Solution is clear and broken into good-first-issue-sized chunks. Z-ibt Temporary label for Ben to keep track of issues he's triaged.
Milestone
0.12 Release Bloc...

Comments

@prayutsu
Copy link
Contributor

We currently do not support a dark theme but when a device enforces a dark theme on the app, then the colors of some images get distorted -
Screenshot_2021-04-27-11-24-27-407_org oppia android
@BenHenning
Copy link
Member

Note that this was found while testing alpha MR2 but is determined to not be a blocker.

@Broppia Broppia added issue_type_bug Impact: Low Low perceived user impact (e.g. edge cases). labels Jul 29, 2022
@BenHenning BenHenning added Impact: Medium Moderate perceived user impact (non-blocking bugs and general improvements). Z-ibt Temporary label for Ben to keep track of issues he's triaged. issue_user_learner and removed Impact: Low Low perceived user impact (e.g. edge cases). labels Sep 15, 2022
@MohitGupta121
Copy link
Member

MohitGupta121 commented Dec 1, 2022 •
edited
Loading

@BenHenning @rt4914 I think this issue is now fixed as now Dark Mode is implemented in our app and in Home Screen.

I build and test from develop and I not to getting this issue:-

https://user-images.githubusercontent.com/76530270/205122164-ed9c913e-431f-4b8d-b470-ebf686d0de53.png

@MohitGupta121 MohitGupta121 self-assigned this Dec 7, 2022
@MohitGupta121 MohitGupta121 mentioned this issue Dec 14, 2022
Merged
6 tasks
rt4914 pushed a commit that referenced this issue Dec 18, 2022
@MohitGupta121
Fixes #3122, #4600: Dark mode implementation - Home Screen, Recently …
0bf4736 
…Played Screen, Promotional Cards, Profile Progress, Ongoing Topic List, Completed Story List (#4786)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Dark mode implementation - Home Screen, Recently Played Screen,
Promotional Cards, Profile Progress, Ongoing Topic List, Completed Story
List

Fixes #3122 : Dark theme make colors of the images distorted
Fixes #4600 : Doesn't have dark mode mock for promoted story  #cards

<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [ ] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only

### Home Screen

<img
src="https://user-images.githubusercontent.com/76530270/206965591-d5217df2-1b1b-4498-85b1-e11ba6e09937.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/206967336-8d2ffdaa-9e69-4295-ba65-1a456996a702.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/206965809-ef4356c1-a1d6-4d51-911b-091f852d307e.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/206967387-181e9699-1566-440a-9285-04a6eda290fe.png"
height="400" style="max-width: 100%">

### Recently Played Screen

<img
src="https://user-images.githubusercontent.com/76530270/206967520-e0f18ebc-07b2-4600-9a7d-36147169875b.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/206966202-acec138c-8643-49e1-8575-507c908f3549.png"
height="400" style="max-width: 100%">


### Promotional Screen

<img
src="https://user-images.githubusercontent.com/76530270/206966449-d97d08bf-ee5b-4573-8fea-3aaa89c20f5f.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/206966453-c5e2aac1-63e5-4712-bf6b-975005562d29.png"
height="400" style="max-width: 100%">

### Profile Progress

<img
src="https://user-images.githubusercontent.com/76530270/206966719-bb8966aa-8725-4858-8d0e-2517719767a3.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/206966713-884f8ea3-906a-4567-bb24-0e8b3d02c48c.png"
height="400" style="max-width: 100%">


### Ongoing Topic List

<img
src="https://user-images.githubusercontent.com/76530270/206966945-f7eea645-33bb-44ed-9c58-828203b66ddf.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/206966952-05de5e15-aacb-429d-b9eb-c20d68de4cd6.png"
height="400" style="max-width: 100%">


### Completed Story List

<img
src="https://user-images.githubusercontent.com/76530270/206967156-a84ea164-9090-4405-8376-255d82094a78.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/206967147-a2583718-e2f8-4695-bcf7-31070bc69ded.png"
height="400" style="max-width: 100%">










<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-(A11y)-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing
Repository owner moved this from Todo to Done in [Task Force] Dark Mode - Android Dec 18, 2022
@rt4914 rt4914 mentioned this issue Dec 20, 2022
Closed
@BenHenning
Copy link
Member

BenHenning commented Aug 15, 2023 •
edited
Loading

From a discussion in CLaM meeting, it seems like this still happening on real devices for both Mohit and Adhiambo (but not emulator). I'm wondering if this is an OEM-specific setting wherein the device is forcing dark mode image inversion.

Edit: from talking further, it seems that on Mohit's device setting the device-wide setting causes inversion but setting a per-app dark mode doesn't. I think this is due to essentially two versions of dark mode being implemented in Android whereby OEMs would force dark mode by sometimes inverting images (when normal AOSP Android only ever provided normal dark mode).

@BenHenning BenHenning reopened this Aug 15, 2023
@BenHenning
Copy link
Member

For potential solutions, might https://stackoverflow.com/a/69568872 work?

@MohitGupta121 MohitGupta121 mentioned this issue Aug 28, 2023
Merged
6 tasks
@adhiamboperes adhiamboperes added bug End user-perceivable behaviors which are not desirable. Work: Low Solution is clear and broken into good-first-issue-sized chunks. labels Sep 9, 2023
adhiamboperes pushed a commit that referenced this issue Sep 12, 2023
@MohitGupta121
Fix #3122 : Dark theme make colors of the images distorted (#5141)
b643538 
<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Fix #3122 : Dark theme make the colors of the images distorted

Solution: Images change their color to white when Dark mode is turned
on. That's why we force disabling dark mode for Image Views prevents
android from force-inverting the colors in the images.

<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [x] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only
<!-- Delete these section if this PR does not include UI-related
changes. -->

| Before Fix | After Fix |
| ------ | ------ |
| <img
src="https://github.com/oppia/oppia-android/assets/76530270/dafd6370-c180-4ca6-bc92-0af8e528728e"
height="400" style="max-width: 100%"> | <img
src="https://github.com/oppia/oppia-android/assets/76530270/95ac7d75-3459-4acb-b682-d98a48803073"
height="400" style="max-width: 100%"> |

| Before Fix | After Fix |
| ------ | ------ |
| <img
src="https://github.com/oppia/oppia-android/assets/76530270/6d483477-dc8b-4399-b043-cb11f6295480"
height="400" style="max-width: 100%"> | <img
src="https://github.com/oppia/oppia-android/assets/76530270/3d3ab830-9cb2-4275-9e44-7f395d574ad2"
height="400" style="max-width: 100%"> |


If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-A11y-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MohitGupta121 MohitGupta121

Labels
bug End user-perceivable behaviors which are not desirable. Impact: Medium Moderate perceived user impact (non-blocking bugs and general improvements). Work: Low Solution is clear and broken into good-first-issue-sized chunks. Z-ibt Temporary label for Ben to keep track of issues he's triaged.
Projects
[Team] Core Learner and Mastery flows & UI Frontend - Android
Archived in project
Milestone
0.12 Release Blockers (Beta "Early Ac...
5 participants
@BenHenning @prayutsu @adhiamboperes @MohitGupta121 @Broppia