Explorer scroll shadow is white on a dark theme after switching themes

[Tyriar]

I just switched recently from my Sapphire dark theme to Light+ and then back and I now see this:

The outlined one is overriding the good one:

The bad styles were in this <style> element if that's useful:

[bpasero]

I also noticed this on vscode.dev switching from dark to light theme.

[alexdima]

I think this is caused by the "duplicate" styling done by the menus. I believed the menus would normally insert CSS into the shadow DOM, but it looks like sometimes they insert styles to the main document. I'm not sure about the rest of the rules, but at least the scrollbar CSS doesn't need to be inserted in the global document as it will just duplicate / fight with the regular mechanism. But I think all other styles in that string might end up duplicated.

@sbatten Is it possible to just eliminate the else branch and avoid inserting these styles to the global document?

[sbatten]

Currently, most menus still use non-shadow DOM so the global styles are a requirement for these menus. Shadow DOM is used to parent the menu under an element to preserve focus but this sometimes causes bad rendering. Perhaps the shared context menu element should be placed under a shadow DOM and then styles would be inserted there

[alexdima]

@sbatten I've prepared a PR at #141924

[rchiodo]

/verified

Stable:

Insiders: