ampproject / ampproject/amphtml
AMP powered Webpage text becomes 'invisible' if dark mode flag enabled in chrome on Android
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
If I enable the Force dark mode flag in chrome flags and select "Enabled with selective inversion of non image elements", all websites work fine, except those pages which are displayed via AMP. In that case, the text turns white, but the background does not turn dark, thus we get White on White, and thus have to load webpage via original link displayed on top.
I understand that Force Dark is an experimental feature, and it may not work in some situations, but in case of AMP, it works partially, ie, it inverts text, but doesn't invert background.
With more and more pages being displayed via AMP, and also more and more people preferring Dark Mode, it would be great if this issue is resolved.
### Reproduction Steps
1. Load
chrome://flags/#enable-force-dark
on a mobile android device with a chrome browser
2. Flag titled:
"Auto Dark Mode for Web Contents
Automatically render all web contents using a dark theme..."
is displayed
3. Select
Enabled with selective inversion of non-image elements
4. Relaunch browser
5. Open any webpage using AMP
e.g. https://www.google.com/amp/s/www.news18.com/amp/news/explainers/explained-the-pralay-missile-and-quasi-ballistic-trajectory-4594088.html
The text in body of article appears invisible.
### Relevant Logs
_No response_
### Browser(s) Affected
Chrome
### OS(s) Affected
Android 12 with May 2022 patch.
### Device(s) Affected
IQOO 7 Legend
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start by reproducing the issue on Android Chrome using chrome://flags/#enable-force-dark with “Enabled with selective inversion of non-image elements,” then open an AMP page such as the linked News18 example. Compare AMP rendering with the original page and verify that article text remains readable with an appropriately dark background under the selected setting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100