Widget, CSS for dark mode no more respected on widget but works on the pop up

[PeopleInside]

Hi, I noticed today that the CSS code that I was using in the widget to activate a dark mode theme when OS system was set on dark is no more working on widget but still work on pop up also if there is no CSS dedicated for pop relative to dark mode.

Maybe some update has broken something or changed CSS priority?

I tried to update to the last commit 81e45e5 but still have the issue also cleaning cache.

I had never changed LHC settings so I think the cause can be an update as my custom Dark mode CSS still be there and also is working for the pop up.

[PeopleInside]

If is not clear in the screenshots I show that the widget has no more a dark theme but is a light one also if custom.
In the pop up all works as expected as in the past but also widget in the past was working with my custom dark mode CSS.
Now is not working.

[remdex]

Status widget is now web component now, so you will have to adjust your theme css.

[PeopleInside]

Thanks for this information.
What means is a web component and I need adjust my theme css?
From the browser console I can see there is the same css elements mmm the css code still be at the same field or I need move the css?

[PeopleInside]

My CSS code work only on admin side, no more on visitor side:

What I have to do?

As you can see in the screenshot visitor widget preview I have the dark mode on the widget but on visitor side the widget is no more dark. My CSS code seems to be correct but are no more applied.

[remdex]

Please educate yourself about webcomponetns and their styling...

[PeopleInside]

Please educate yourself about webcomponetns and their styling...

What I do wrong?
My CSS was working, is not working anymore after the LHC update.
Now it works only on admin preview no more on visitor side and I dont understand why.

As you can see in the admin widget preview my old code works, is no more working on the website visitor side.

[remdex]

These rules works on my env if are put in Status widget additional CSS. Color changes only if you change windows color theme. They did not reacted to chrome color theme.

@media (prefers-color-scheme: dark) {
  #lhc_status_container #status-icon{
    background-color:red!important;
    }
}


@media (prefers-color-scheme: light) {
  #lhc_status_container #status-icon{
    background-color:blue!important;
    }
}

[PeopleInside]

Hum...
My CSS code to apply the dark mode seems correct.
I have already @media (prefers-color-scheme: dark) rules.

What i see today is that if WIndows OS change color from dark then seems on Firefox the LHC chat widget seems never activate the dark mode. Seems if I simulate in Firefox with the developer tool the dark ... the widget dark mode works.

It's strange I have to investigate this maybe be sure is not an issue just with Firefox. It's a new issue, I never had this issue in the past.

[PeopleInside]

I can confirm, my code works but seems Firefox is not propriely apply to LHC if Windows color change.
It's a strange issue, I will try to open a BUG in Firefox but looks strange it's a Firefox bug.
Very strange :) with Chrome no issues.

webcompat/web-bugs#139227

[PeopleInside]

https://bugzilla.mozilla.org/show_bug.cgi?id=1908060

[PeopleInside]

Hi @remdex,
seems in the widget iframe there is color-scheme: light and I belive i dont added this. IS maybe some update of LHC?
The firefox bug has been closed as not bug in Firefox but an issue in LHC widget
https://bugzilla.mozilla.org/show_bug.cgi?id=1908060#c5

I checked and in my CSS widget code I have just color scheme dark, i haven't put light scheme.
I believe at this point some widget update has introduced a light CSS that seems is causing issue with the CSS dark mode I inserted and was working before LHC update.

Firefox has closed the bug report to not a Firefox bug.
Chrome has a bug that show the widget dark but something in the LHC widget seems told to use the light schema from what I'm understanding. I have no light schema CSS rules so if this exist seems is from LHC core CSS code.

Firefo reply:

The <iframe> explicitly has color-scheme: light so it's expected.

LHC widget is set to be always light? This is an updated made by you and if I want have the dark theme?
In the past my CSS dark mode code was working on LHC widget. I never edited my CSS dark code so I suppose is an update of LHC that is causing the issue.

[PeopleInside]

To fix the issue caused by the CSS light rule inserted not by me but seems is in the core I need add additional CSS to unset the color scheme in the field Custom page CSS (new widget only):