ampproject / ampproject/amphtml

AMP powered Webpage text becomes 'invisible' if dark mode flag enabled in chrome on Android

Open
#38,367 6 comments 0 reactions 0 assignees View on GitHub
P3: When Possible Stale Type: Bug WG: viewers
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.