1908060 - dark color-scheme preference doesn't propagate to chat widget iframe at peopleinside.it

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Marco]

Attachment: Screenshot 2024-07-16 093246.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0

Steps to reproduce:

open https://www.peopleinside.it
at the right bottom open the widget chat
turn on Windows dark theme
the live chat widget should have a dark theme but is not in Firefox, is just on Chrome

What is expected is that the CSS on the live chat activate the dark theme color preference. This never happen.

In Chrome based browser this issue is not present.
In the past I never had this issue using Firefox.

Actual results:

The live chat widget dark color is not respected just on Firefox.
In the past this issue was not present.

On Chrome based browser no issues.

Expected results:

The live chat widget should apply the dark color preference I set in the chat CSS

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Firefox::Theme' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Marco]

An important note:
if you simulate the dark mode using the Firefox developer console then the live chat is correctly showed in the dark mode.
For reproduce the issue you need turn on and off a dark and a light theme of Windows.

Comment 3

[Daniel Holbert [:dholbert]]

Thanks for the bug report! I can reproduce (just using Firefox about:preferences to activate a dark color-scheme preference, on Linux).

It looks like this chat-widget is an iframe that gets constructed dynamically (i.e. its URL is about:blank but it has a DOM that's fully-populated), and the stylesheet in question that's supposed to grant it dark mode is:
https://livechat.peopleinside.it//widgetrestapi/theme/9?v=1721147884

I can see that stylesheet being referenced inside the iframe like so:

<link rel="stylesheet" crossorigin="anonymous" href="//livechat.peopleinside.it//widgetrestapi/theme/9?v=1721147884">

...and I can see that the stylesheet is applying in general, e.g. the blue bar at the top of the chat widget is defined in the stylesheet here and that blue goes away if I nerf the above-mentioned link attribute:

.header-chat {
  background-color: #1f9eb5 !important;

For whatever reason, prefers-color-scheme:dark evaluates to false in that stylesheet (and all stylesheets in the iframe, I think). E.g. if I add the following CSS at the start of that sheet to impose a thick red border, no such border actually shows up (though it does show up if I change dark to light. And if I insert it on the *outer( document instead, it applies as-expected when I use 'dark' in the CSS and insert the rule to a stylesheet there.)

@media (prefers-color-scheme:dark) {
    :root { border: 10px solid red }
}

emilio, perhaps you know what's going on or could take a look at some point? I think you know the color-scheme handling stuff the best, including how it applies to iframes.

For what it's worth, I constructed a trivial testcase to try to trigger this issue but so far prefers-color-scheme is working just fine in my testcase. I might be populating the iframe differently from how it's populated in this real site, though (I haven't stepped through the JS to find out how this iframe gets populated).

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (quick attempt, which doesn't actually trigger the bug)

For the record, here's the quick reduced testcase that I spun up; this one successfully honors prefers-color-scheme:dark inside of the iframe (as can be seen by the lime background rendering properly), so it doesn't actually trigger the bug.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

The <iframe> explicitly has color-scheme: light so it's expected. It's a bug in chrome that it doesn't show as light per https://github.com/w3c/csswg-drafts/issues/7493

Comment 6

[Marco]

Thank you, seems so a bug in the live chat software, I will report to the developer.
Thanks