Fix widgets sometimes rendering in light theme when VS Code is in a dark theme (#2120)

(See related issues
microsoft/vscode-jupyter#7161 and
microsoft/vscode-jupyter#9403 for more
background)

Our CSS override to address the widget theming issue wasn't working
somtimes, which was very frustrating, as in Dark Mode our widgets would
often appear as they should in light mode.

The reason is that the order in which the style sheets get injected is
non-deterministic, and as the 'problematic' CSS rule and the override to
fix it have the same specificity, it would be 'last one wins'. Sometimes
our style-sheet is last and it works...

<img width="955" alt="image"
src="https://github.com/user-attachments/assets/281524d8-a3d5-4d15-a649-442a21b5ddec"
/>

And sometimes the IPyWidgets 'force it to white' rule is last so the
issue persists...

<img width="960" alt="image"
src="https://github.com/user-attachments/assets/f60f762e-0312-49de-9a2d-6f3cf4833b20"
/>

The unfortunate best _hack_ I could come up with is to programmatically
ensure the override CSS rule is always last in the `style`s in the
header.

Not pretty, but it works.

Author: billti

npm/qsharp/ux/qsharp-ux.css

@@ -501,11 +501,6 @@ html {
 
 /* Space chart */
 
-/* Needed until https://github.com/microsoft/vscode-jupyter/issues/7161 is resolved */
-.cell-output-ipywidget-background {
-  background-color: transparent !important;
-}
-
 #pieChart {
   fill: var(--main-color);
 }

widgets/js/index.tsx

@@ -40,6 +40,22 @@ type RenderArgs = {
 export function render({ model, el }: RenderArgs) {
   const componentType = model.get("comp");
 
+  // There is an existing issue where in VS Code it always shows the widget background as white.
+  // (See https://github.com/microsoft/vscode-jupyter/issues/7161)
+  // We tried to fix this in CSS by overridding the style, but there is a race condition whereby
+  // depending on which style gets injected first (ours or ipywidgets), it may or may not work.
+
+  // The solution here is to force our own override to be last in the style list if not already.
+  // It's a bit of a hack, but it works, and I couldn't find something better that wouldn't be fragile.
+
+  if (
+    !el.ownerDocument.head.lastChild?.textContent?.includes("widget-css-fix")
+  ) {
+    const forceStyle = el.ownerDocument.createElement("style");
+    forceStyle.textContent = `/* widget-css-fix */ .cell-output-ipywidget-background {background-color: transparent !important;}`;
+    el.ownerDocument.head.appendChild(forceStyle);
+  }
+
   switch (componentType) {
     case "SpaceChart":
       renderChart({ model, el });