@marimo-team/islands 0.25.3-dev273 → 0.25.3-dev275

package/src/theme/__tests__/islands-theme.test.tsx

@@ -0,0 +1,276 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, waitFor } from "@testing-library/react";
+import { createStore } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { JsonOutput } from "@/components/editor/output/JsonOutput";
+import {
+  marimoDarkTheme,
+  marimoLightTheme,
+} from "@/components/editor/output/json-output/themes";
+import { userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { StyleNamespace } from "../namespace";
+import { resolvedThemeAtom } from "../useTheme";
+
+let store: ReturnType<typeof createStore>;
+let unsubscribe: (() => void) | undefined;
+let media: EventTarget & { matches: boolean };
+
+beforeEach(() => {
+  vi.stubEnv("VITE_MARIMO_ISLANDS", "true");
+  media = Object.assign(new EventTarget(), { matches: false });
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn(() => media),
+  );
+  store = createStore();
+});
+
+afterEach(() => {
+  stopObserving();
+  for (const element of [document.body, document.documentElement]) {
+    for (const attribute of [
+      "class",
+      "style",
+      "data-theme",
+      "data-mode",
+      "data-vscode-theme-kind",
+    ]) {
+      element.removeAttribute(attribute);
+    }
+  }
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+function subscribe() {
+  unsubscribe = store.sub(resolvedThemeAtom, vi.fn());
+}
+
+function stopObserving() {
+  unsubscribe?.();
+  unsubscribe = undefined;
+}
+
+function getTheme() {
+  return store.get(resolvedThemeAtom);
+}
+
+function setSystemTheme(matches: boolean) {
+  media.matches = matches;
+  media.dispatchEvent(new Event("change"));
+}
+
+describe("islands host theme", () => {
+  it("defaults to light on a transparent page even if the system is dark", () => {
+    media.matches = true;
+    subscribe();
+    expect(getTheme()).toBe("light");
+  });
+
+  it.each(["body", "html"])(
+    "follows %s theme attributes in both directions",
+    async (tag) => {
+      const host = document.querySelector(tag)!;
+      subscribe();
+      for (const [attribute, dark, light] of [
+        ["class", "dark", "light"],
+        ["class", "dark-mode", "light-mode"],
+        ["class", "dark-theme", "light-theme"],
+        ["data-theme", "dark", "light"],
+        ["data-mode", "dark", "light"],
+      ]) {
+        host.setAttribute(attribute, dark);
+        await expect.poll(getTheme).toBe("dark");
+        host.setAttribute(attribute, light);
+        await expect.poll(getTheme).toBe("light");
+        host.removeAttribute(attribute);
+      }
+    },
+  );
+
+  it("reads the initial host theme and follows color-scheme changes", async () => {
+    document.body.style.colorScheme = "dark";
+    subscribe();
+    expect(getTheme()).toBe("dark");
+    document.body.style.colorScheme = "light";
+    await expect.poll(getTheme).toBe("light");
+    document.body.style.colorScheme = "dark";
+    await expect.poll(getTheme).toBe("dark");
+  });
+
+  it("uses the background when color-scheme is normal", async () => {
+    document.body.style.colorScheme = "normal";
+    document.body.style.backgroundColor = "rgb(30, 30, 30)";
+    subscribe();
+    expect(getTheme()).toBe("dark");
+    document.body.style.backgroundColor = "white";
+    await expect.poll(getTheme).toBe("light");
+  });
+
+  it("resolves a host supporting both color schemes when the system changes", async () => {
+    document.body.style.colorScheme = "light dark";
+    subscribe();
+    expect(getTheme()).toBe("light");
+    for (const matches of [true, false]) {
+      setSystemTheme(matches);
+      await expect.poll(getTheme).toBe(matches ? "dark" : "light");
+    }
+  });
+
+  it("shares a subscription, skips unchanged themes, and cleans up on unmount", async () => {
+    const disconnect = vi.spyOn(MutationObserver.prototype, "disconnect");
+    const removeListener = vi.spyOn(media, "removeEventListener");
+    const listener = vi.fn();
+    subscribe();
+    const unsubscribeSecond = store.sub(resolvedThemeAtom, listener);
+    document.body.classList.add("unrelated");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(listener).not.toHaveBeenCalled();
+    unsubscribeSecond();
+    expect(disconnect).not.toHaveBeenCalled();
+    stopObserving();
+    expect(disconnect).toHaveBeenCalledOnce();
+    expect(removeListener).toHaveBeenCalledWith("change", expect.any(Function));
+    document.body.classList.add("dark");
+    subscribe();
+    expect(getTheme()).toBe("dark");
+  });
+
+  it("ignores unrecognized theme attributes and transparent body backgrounds", async () => {
+    document.body.dataset.theme = "custom-theme";
+    document.body.dataset.mode = "auto";
+    document.body.style.backgroundColor = "rgba(0, 0, 0, 0)";
+    document.documentElement.style.backgroundColor = "white";
+    subscribe();
+    expect(getTheme()).toBe("light");
+    document.documentElement.style.backgroundColor = "black";
+    await expect.poll(getTheme).toBe("dark");
+    document.documentElement.style.backgroundColor = "transparent";
+    await expect.poll(getTheme).toBe("light");
+  });
+
+  it("falls back after a theme attribute is removed", async () => {
+    document.body.dataset.theme = "dark";
+    document.body.style.colorScheme = "light";
+    subscribe();
+    expect(getTheme()).toBe("dark");
+    delete document.body.dataset.theme;
+    await expect.poll(getTheme).toBe("light");
+  });
+
+  it("continues to observe the host without matchMedia", async () => {
+    vi.stubGlobal("matchMedia", undefined);
+    document.body.style.colorScheme = "light dark";
+    subscribe();
+    expect(getTheme()).toBe("light");
+    document.body.style.colorScheme = "only dark";
+    await expect.poll(getTheme).toBe("dark");
+  });
+
+  it.each(["light", "dark"] as const)(
+    "does not override an explicit %s host when system preferences change",
+    (theme) => {
+      document.body.style.colorScheme = theme;
+      subscribe();
+      for (const matches of [true, false]) {
+        setSystemTheme(matches);
+        expect(getTheme()).toBe(theme);
+      }
+    },
+  );
+
+  it("re-reads host CSS when a media query changes its color-scheme", () => {
+    const computedStyle = window.getComputedStyle(document.body);
+    const scheme = vi.spyOn(computedStyle, "colorScheme", "get");
+    vi.spyOn(window, "getComputedStyle").mockReturnValue(computedStyle);
+    scheme.mockReturnValue("light");
+    subscribe();
+    expect(getTheme()).toBe("light");
+    scheme.mockReturnValue("dark");
+    media.dispatchEvent(new Event("change"));
+    expect(getTheme()).toBe("dark");
+  });
+
+  it("discards queued mutations and media events after the last unsubscribe", async () => {
+    const readStyle = vi.spyOn(window, "getComputedStyle");
+    subscribe();
+    document.body.style.colorScheme = "dark";
+    stopObserving();
+    readStyle.mockClear();
+    media.dispatchEvent(new Event("change"));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(readStyle).not.toHaveBeenCalled();
+    subscribe();
+    expect(getTheme()).toBe("dark");
+  });
+
+  it("keeps the VS Code override and returns to the host after it is removed", async () => {
+    document.body.classList.add("dark");
+    const { container, unmount } = render(
+      <StyleNamespace>Widget</StyleNamespace>,
+    );
+    for (const [kind, theme] of [
+      ["vscode-light", "light"],
+      ["vscode-high-contrast", "dark"],
+      ["vscode-light", "light"],
+    ]) {
+      document.body.dataset.vscodeThemeKind = kind;
+      await waitFor(() => expect(container.firstChild).toHaveClass(theme));
+    }
+    delete document.body.dataset.vscodeThemeKind;
+    await waitFor(() => expect(container.firstChild).toHaveClass("dark"));
+    unmount();
+  });
+
+  it("does not subscribe to host themes outside Islands", async () => {
+    vi.stubEnv("VITE_MARIMO_ISLANDS", "false");
+    const config = defaultUserConfig();
+    store.set(userConfigAtom, {
+      ...config,
+      display: { ...config.display, theme: "light" },
+    });
+    const observe = vi.spyOn(MutationObserver.prototype, "observe");
+    const addListener = vi.spyOn(media, "addEventListener");
+    subscribe();
+    document.body.classList.add("dark");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(getTheme()).toBe("light");
+    expect(observe).not.toHaveBeenCalled();
+    expect(addListener).not.toHaveBeenCalled();
+  });
+
+  it("updates the namespace root used by shadow DOM widgets", async () => {
+    const { container } = render(<StyleNamespace>Widget</StyleNamespace>);
+    expect(container.firstChild).toHaveClass("marimo", "light");
+    document.body.classList.add("dark");
+    await waitFor(() =>
+      expect(container.firstChild).toHaveClass("marimo", "dark"),
+    );
+    document.body.classList.remove("dark");
+    await waitFor(() =>
+      expect(container.firstChild).toHaveClass("marimo", "light"),
+    );
+  });
+
+  it("updates the dictionary viewer palette without remounting", async () => {
+    const { container } = render(
+      <JsonOutput data={{ relu: 0, note: "text" }} />,
+    );
+    const viewer = container.querySelector<HTMLElement>(
+      ".w-json-view-container",
+    );
+    expect(viewer).not.toBeNull();
+    for (const theme of ["dark", "light"] as const) {
+      document.body.dataset.theme = theme;
+      const palette = theme === "dark" ? marimoDarkTheme : marimoLightTheme;
+      await waitFor(() =>
+        expect(viewer?.style.getPropertyValue("--w-rjv-color")).toBe(
+          palette["--w-rjv-color"],
+        ),
+      );
+    }
+  });
+});

package/src/theme/namespace.tsx

@@ -1,20 +1,21 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, { type PropsWithChildren } from "react";
+import { useTheme } from "./useTheme";
 
 const style = {
   display: "contents",
 };
 
 /**
- * Adds the 'marimo' className which serves as a namespace to its children,
- * so that the styles are scoped to the DOM subtree.
+ * Scopes styles and applies the theme before descendants inherit text colors.
  */
 export const StyleNamespace = React.forwardRef<
   HTMLDivElement,
   PropsWithChildren<{}>
 >(({ children }, ref) => {
+  const { theme } = useTheme();
   return (
-    <div ref={ref} className="marimo" style={style}>
+    <div ref={ref} className={`marimo ${theme}`} style={style}>
       {children}
     </div>
   );

package/src/theme/useTheme.ts

@@ -21,61 +21,92 @@ function themeFromQueryParam(): Theme | undefined {
   return THEMES.includes(value as Theme) ? (value as Theme) : undefined;
 }
 
-const themeAtom = atom((get) => {
-  // If it is islands, try a few ways to infer if it is dark mode.
-  if (isIslands()) {
-    // If it has a dark mode class on the body, use dark mode.
-    if (
-      document.body.classList.contains("dark-mode") ||
-      document.body.classList.contains("dark")
-    ) {
-      return "dark";
-    }
+function getHostElements() {
+  return [document.body, document.documentElement];
+}
 
-    // If it has data-theme=dark or data-mode=dark on the body, use dark mode.
-    if (
-      document.body.dataset.theme === "dark" ||
-      document.body.dataset.mode === "dark" ||
-      getVsCodeTheme() === "dark"
-    ) {
-      return "dark";
-    }
+function getColorSchemeMedia() {
+  return typeof window === "undefined"
+    ? undefined
+    : window.matchMedia?.("(prefers-color-scheme: dark)");
+}
 
-    // Check the computed style for color-scheme
-    const computedStyle = window.getComputedStyle(document.body);
-    const colorScheme = computedStyle.getPropertyValue("color-scheme").trim();
-    if (colorScheme) {
-      return colorScheme.includes("dark") ? "dark" : "light";
+/** Body markers override HTML markers. CSS provides the fallback. */
+function getHostTheme(
+  prefersDark = getColorSchemeMedia()?.matches,
+): ResolvedTheme {
+  const elements = getHostElements();
+  for (const element of elements) {
+    for (const theme of ["dark", "light"] as const) {
+      if (
+        element.classList.contains(theme) ||
+        element.classList.contains(`${theme}-mode`) ||
+        element.classList.contains(`${theme}-theme`) ||
+        element.dataset.theme === theme ||
+        element.dataset.mode === theme
+      ) {
+        return theme;
+      }
     }
+  }
+
+  const styles = elements.map((element) => window.getComputedStyle(element));
+  const colorScheme = styles[0].colorScheme.split(/\s+/);
+  if (colorScheme.includes("dark")) {
+    return !colorScheme.includes("light") || prefersDark ? "dark" : "light";
+  }
+  if (colorScheme.includes("light")) {
+    return "light";
+  }
 
-    // Fallback: check for dark background color
-    const bgColor = computedStyle.getPropertyValue("background-color");
-    const rgb = bgColor.match(/\d+/g);
-    if (rgb) {
-      const [r, g, b] = rgb.map(Number);
-      const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-      return brightness < 128 ? "dark" : "light";
+  // Transparent backgrounds do not indicate a dark host page.
+  for (const style of styles) {
+    const rgb = style.backgroundColor.match(/[\d.]+/g)?.map(Number);
+    if (rgb && (rgb.length === 3 || rgb[3] > 0)) {
+      const [r, g, b] = rgb;
+      return (r * 299 + g * 587 + b * 114) / 1000 < 128 ? "dark" : "light";
     }
+  }
 
-    // We don't want to infer from the system theme,
-    // since the island consumer may not support dark mode.
-    return "light";
+  // A dark system preference does not imply a dark host.
+  return "light";
+}
+
+const hostThemeAtom = atom<ResolvedTheme | undefined>(undefined);
+hostThemeAtom.onMount = (setTheme) => {
+  const media = getColorSchemeMedia();
+  const updateTheme = () => setTheme(getHostTheme(media?.matches));
+  const observer = new MutationObserver(updateTheme);
+  for (const element of getHostElements()) {
+    observer.observe(element, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-mode", "style"],
+    });
   }
+  media?.addEventListener("change", updateTheme);
+  updateTheme();
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", updateTheme);
+    // A later mount must read the current host theme.
+    setTheme(undefined);
+  };
+};
 
+const themeAtom = atom((get) => {
+  if (isIslands()) {
+    return get(hostThemeAtom) ?? getHostTheme();
+  }
   return themeFromQueryParam() ?? get(resolvedMarimoConfigAtom).display.theme;
 });
 
 const prefersDarkModeAtom = atom(false);
 
 function setupThemeListener(): void {
-  if (typeof window === "undefined") {
+  const media = getColorSchemeMedia();
+  if (!media) {
     return;
   }
-  if (!window.matchMedia) {
-    return;
-  }
-
-  const media = window.matchMedia("(prefers-color-scheme: dark)");
   store.set(prefersDarkModeAtom, media.matches);
   media.addEventListener("change", (e) => {
     store.set(prefersDarkModeAtom, e.matches);
@@ -126,8 +157,7 @@ export const resolvedThemeAtom = atom((get) => {
 });
 
 /**
- * React hook to get the theme of the app.
- * This is stored in the user config.
+ * Returns the resolved theme from VS Code, the Islands host, or notebook settings.
  */
 export function useTheme(): { theme: ResolvedTheme } {
   const theme = useAtomValue(resolvedThemeAtom, { store });