www.google.com - The "Dark theme" option of the page is presented broken if the user is signed in

[webcompat-bot]

URL: https://www.google.com/search?q=metroid+dread&client=firefox-b-1-d&sxsrf=AOaemvJIAy5vVf8RWW4HhClgVx9ml5GjGQ:1638327172467&source=lnms&tbm=shop&sa=X&ved=2ahUKEwiR14-pzMH0AhVoDjQIHdSUDZ4Q_AUoAXoECAEQAw&biw=1047&bih=598&dpr=2

Browser / Version: Firefox 94.0.2
Operating System: Mac OS X 10.15.7
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: When Google search is set to Dark Mode, the Google Shopping page doesn't display correctly
Steps to Reproduce:
To reproduce this, make sure Google is set to dark mode. In the upper right, click the setting cog and turn Dark Theme on. Next, go to the Google Shopping page. It won't look right if you do this in Firefox. It displays correctly in Chrome and Safari.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue using other devices as well. Following the link provided, if the settings for "Dark Theme" are enabled from the search settings and the user is logged into the account, the "Dark Theme" option of the page is presented broken:

If the user is not signed in, the theme is presented as expected:

Tested with:

Browser / Version: Firefox Release 94.0.2 (64-bit)/ Firefox Nightly 96.0a1 (2021-12-01) (64-bit)/Chrome Version 96.0.4664.45 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64
Operating System: Mac OSX 10.15.6

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly.
3. User is signed in.
4. Works as expected using Chrome:

Moving this to NeedsDiagnosis for further investigations.

[wisniewskit]

It appears that in Chrome, the background color of that containing element (<div style="float:left;width:100%">, in div#rcnt) is inherited from this CSS right in a style tag in the base document:

body {
    background: #dddee1;
}

Chrome is using that to compute the color for the dark version. Firefox's devtools don't show the background style at all when I inspect that element (but do when I inspect the body tag). If I add the background#dddee1 to the element manually in the inspector, the color shows up as expected.

To me, Firefox is doing the right thing, because background CSS isn't inherited, so I'm not sure why Chrome is doing this (unless it's some sort of quirk of dark mode?)

[karlcow]

https://www.google.com/search?q=metroid+dread&cs=2&source=lnms&tbm=shop&sa=X&ved=2ahUKEwjalOrrsO32AhXE-WEKHdX2BqMQ_AUoA3oECAEQBQ

This is what I get.

The way the dark mode is created is with

html {
 filter:invert(1) hue-rotate(180deg)
}

except that this doesn't seem to have the same effect at all in firefox and Blink.

This is a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1682083