Bugzilla

Thanks for the bug report! I can reproduce.

It looks like this widget is an iframe that gets constructed dynamically (i.e. its URL is `about:blank` but it's got 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:
```html
<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:
```css
.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 this CSS, then it fails to apply (though it does apply if I change `dark` to `light`; or if I add it to the outer document instead):
```css
@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).

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:
```html
<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:
```css
.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 this CSS, then it fails to apply (though it does apply if I change `dark` to `light`; or if I add it to the outer document instead):
```css
@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).

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:
```html
<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:
```css
.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 this CSS, then it fails to apply (though it does apply if I change `dark` to `light`; or if I add it to the outer document instead):
```css
@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).

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:
```html
<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:
```css
.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 it shows up with `dark` on the outer document if I add it to a stylesheet there instead):
```css
@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).

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:
```html
<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:
```css
.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.)
```css
@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).