fix jupyter notebook dark theme

Author: ScottCarda-MS

source/npm/qsharp/ux/qsharp-ux.css

@@ -76,19 +76,17 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
 
 /* Histogram palette overrides for dark themes.
 
-VS Code webviews can indicate the theme in a few ways:
- - Classes: .vscode-dark, .vscode-high-contrast, .vscode-high-contrast-light
- - Attribute: data-vscode-theme-kind="vscode-..." (preferred)
+Theme detection sources:
+- VS Code webviews: body[data-vscode-theme-kind="vscode-dark"|"vscode-high-contrast"].
+- JupyterLab/Notebook 7: use data-qs-color-scheme selector set by render code.
 
-Important: VS Code adds .vscode-high-contrast for backwards compatibility even
-when the theme is actually vscode-high-contrast-light, so we must explicitly
-exclude that case.
+Note: the Jupyter widgets (AnyWidget) render inside a Shadow DOM, so we include
+data-qs-color-scheme selector to allow matching in response to render done from widget
+index.
 */
-body.vscode-dark,
-body.vscode-high-contrast:not(.vscode-high-contrast-light),
 body[data-vscode-theme-kind="vscode-dark"],
 body[data-vscode-theme-kind="vscode-high-contrast"],
-body[vscode-color-theme="dark"] {
+[data-qs-color-scheme="dark"] {
   --qs-histogram-bg: #1e1e1e;
   --qs-histogram-border: #3c3c3c;
   --qs-histogram-bar-fill: #4aa3ff;

source/widgets/js/index.tsx

@@ -38,9 +38,126 @@ type RenderArgs = {
   el: HTMLElement;
 };
 
+function getWidgetHost(el: HTMLElement): HTMLElement {
+  const root = el.getRootNode();
+  if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+    return root.host;
+  }
+
+  return el;
+}
+
+function computeColorScheme(doc: Document): "dark" | "light" {
+  const body = doc.body;
+
+  // VS Code webviews
+  const vscodeKind = body?.getAttribute("data-vscode-theme-kind");
+  if (vscodeKind === "vscode-dark" || vscodeKind === "vscode-high-contrast") {
+    return "dark";
+  }
+  if (
+    vscodeKind === "vscode-light" ||
+    vscodeKind === "vscode-high-contrast-light"
+  ) {
+    return "light";
+  }
+
+  // JupyterLab / Notebook 7
+  if (body?.classList.contains("jp-mod-theme-dark")) {
+    return "dark";
+  }
+  if (body?.classList.contains("jp-mod-theme-light")) {
+    return "light";
+  }
+
+  // Some JupyterLab themes expose data-jp-theme-light="true|false".
+  const jpThemeLight = body?.getAttribute("data-jp-theme-light");
+  if (jpThemeLight === "false") {
+    return "dark";
+  }
+  if (jpThemeLight === "true") {
+    return "light";
+  }
+
+  // Fallback: OS/browser preference.
+  return doc.defaultView?.matchMedia?.("(prefers-color-scheme: dark)")?.matches
+    ? "dark"
+    : "light";
+}
+
+const themeObserverByDocument = new WeakMap<Document, MutationObserver>();
+const themeHostsByDocument = new WeakMap<Document, Set<HTMLElement>>();
+
+function applyAndObserveTheme(el: HTMLElement) {
+  const doc = el.ownerDocument;
+  const host = getWidgetHost(el);
+
+  let hosts = themeHostsByDocument.get(doc);
+  if (!hosts) {
+    hosts = new Set<HTMLElement>();
+    themeHostsByDocument.set(doc, hosts);
+  }
+  hosts.add(host);
+
+  const apply = () => {
+    const scheme = computeColorScheme(doc);
+    if (scheme === "dark") {
+      host.setAttribute("data-qs-color-scheme", "dark");
+    } else {
+      host.removeAttribute("data-qs-color-scheme");
+    }
+  };
+
+  apply();
+
+  // Ensure we only register one observer per document.
+  if (!themeObserverByDocument.has(doc)) {
+    const observer = new MutationObserver(() => {
+      const currentHosts = themeHostsByDocument.get(doc);
+      if (!currentHosts) return;
+
+      const scheme = computeColorScheme(doc);
+
+      // Apply to all known hosts; drop any that are no longer connected.
+      for (const h of currentHosts) {
+        if (!h.isConnected) {
+          currentHosts.delete(h);
+          continue;
+        }
+
+        if (scheme === "dark") {
+          h.setAttribute("data-qs-color-scheme", "dark");
+        } else {
+          h.removeAttribute("data-qs-color-scheme");
+        }
+      }
+    });
+
+    // Observe theme changes on the body (VS Code and JupyterLab mutate class/attrs).
+    if (doc.body) {
+      observer.observe(doc.body, {
+        attributes: true,
+        attributeFilter: [
+          "class",
+          "data-vscode-theme-kind",
+          "data-jp-theme-light",
+          "data-jp-theme-name",
+        ],
+      });
+    }
+
+    themeObserverByDocument.set(doc, observer);
+  }
+}
+
 function render({ model, el }: RenderArgs) {
   const componentType = model.get("comp");
 
+  // Set a stable color-scheme marker for CSS (works in Jupyter-only and VS Code).
+  // This is especially important when AnyWidget uses Shadow DOM, where selectors
+  // like body.jp-mod-theme-dark won't match inside the widget stylesheet.
+  applyAndObserveTheme(el);
+
   // 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 overriding the style, but there is a race condition whereby