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

[guglusharma]

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

[guglusharma]

Selecting Dark Mode in Chrome after disabling Force Dark mode brings back old experience where AMP pages appear White even in Dark Mode, which feels jarring, specially at night, so if websites don't get broken by AMP in force dark mode, it would be awesome.

[guglusharma]

Well, actually this bug does not occur if option 'Enabled' is selected, instead of 'Enabled with selective inversion of non-image elements', so my issue is resolved, but you might still label it as non urgent to explore why the problem occurs in the scenario described at the top to see why that issue happened, if needed. Thanks.

[guglusharma]

Actually sometimes the bug appears even if 'Enabled' option is selected in Force Dark Mode options. The AMP page if opened from search results remains white with invisible text, but if I copy address and reload, the page becomes dark.

Link from search page: The link to Business Insider link on this search page: https://www.google.com/search?q=india+us+yudh+abhyas&client=ms-android-vivo-rvo2&tbs=sbd:1&tbm=nws&prmd=nvi&sxsrf=ALiCzsaJWdEhldLA_7A7SKAk1kIUL3HohQ:1659552926637&ei=nsTqYrrIJr3C4-EP4teVqAE&start=10&sa=N&biw=393&bih=769&dpr=2.75

Reload Link: https://www.google.com/amp/s/www.businessinsider.com/us-indian-soldiers-yudh-abhyas-exercise-alaska-amid-china-tension-2021-12%3famp

[newmuis]

I do not believe this to be a problem with the AMP runtime, but with the implementation of those AMP pages, which is not something that we can control. The authors of these pages would need to change their implementation to account for this experimental feature.

[guglusharma]

Thanks for looking into this issue. I have faced this issue only while going through the news section of google search results of any topic. It happens on a lot of websites. Maybe it can be confirmed if improper website code is really the issue, and maybe AMP project's guidelines can explicitly state the conditions when such issue may be faced, so that web developers going through guidelines can write/structure their code in the correct way. I am a non technical person, so I am not sure how easy or complex it would be to verify why the issue happens and provide adequate instructions in the manual to avoid this issue in the future, but I am just reporting this behaviour in the hope that some web dev if bored may look into it and just add a few lines of instructions to warn web developers porting their pages to AMP to check and apply any fix that may be found.

From a news article I read: "Lyrical as usual, Apple said about Dark Mode that it’s a “dramatic new look that helps you focus on your work,’’ as well as a “distraction-free environment that’s easy on the eyes — in every way”.

Google was much more pragmatic, saying Dark Theme can “reduce power usage by a significant amount”, “improve visibility for users with low vision and those who are sensitive to bright light” and “make it easier for anyone to use a device in a low-light environment”."

So as more and more people try using Dark mode on their devices, Google might find it useful to investigate what code is breaking sometimes a significant number webpages of the news section when opened in dark mode, and issue page coding guidelines to make their pages work with dark mode.

Ofcourse whenever the urgent issues are fixed.