feat: sync embedded analytics theme with parent app

lib/theme-sync.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, test } from "bun:test";
+import { resolveIncomingThemeMode, resolveStoredTheme } from "./theme-sync";
+
+describe("theme sync helpers", () => {
+  test("resolves stored analytics theme values", () => {
+    expect(resolveStoredTheme("light", true)).toBe("light");
+    expect(resolveStoredTheme("dark", false)).toBe("dark");
+    expect(resolveStoredTheme("system", true)).toBe("dark");
+    expect(resolveStoredTheme("system", false)).toBe("light");
+  });
+
+  test("maps new-api theme messages to analytics themes", () => {
+    expect(resolveIncomingThemeMode("light", true)).toBe("light");
+    expect(resolveIncomingThemeMode("dark", false)).toBe("dark");
+    expect(resolveIncomingThemeMode("auto", true)).toBe("dark");
+    expect(resolveIncomingThemeMode("auto", false)).toBe("light");
+    expect(resolveIncomingThemeMode("system", true)).toBe("dark");
+    expect(resolveIncomingThemeMode("unknown", true)).toBeNull();
+  });
+});

lib/theme-sync.ts

@@ -0,0 +1,29 @@
+import type { Theme } from "./theme";
+
+export type ResolvedTheme = "light" | "dark";
+
+export function resolveStoredTheme(
+  theme: Theme,
+  prefersDark: boolean,
+): ResolvedTheme {
+  if (theme === "system") {
+    return prefersDark ? "dark" : "light";
+  }
+
+  return theme;
+}
+
+export function resolveIncomingThemeMode(
+  mode: unknown,
+  prefersDark: boolean,
+): ResolvedTheme | null {
+  if (mode === "light" || mode === "dark") {
+    return mode;
+  }
+
+  if (mode === "auto" || mode === "system") {
+    return prefersDark ? "dark" : "light";
+  }
+
+  return null;
+}

lib/theme.tsx

@@ -1,61 +1,137 @@
 "use client";
 
-import { createContext, useContext, useState, useEffect, type ReactNode } from "react";
+import { createContext, useContext, useState, useEffect, startTransition, type ReactNode } from "react";
+import { resolveIncomingThemeMode, resolveStoredTheme, type ResolvedTheme } from "./theme-sync";
 
 export type Theme = "light" | "dark" | "system";
 
 interface ThemeContextType {
   theme: Theme;
   setTheme: (t: Theme) => void;
-  resolved: "light" | "dark";
+  resolved: ResolvedTheme;
+  isEmbedded: boolean;
+}
+
+function getPrefersDark() {
+  if (typeof window === "undefined") {
+    return true;
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function getIsEmbedded() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+
+function getParentResolvedTheme(): ResolvedTheme | null {
+  if (!getIsEmbedded()) {
+    return null;
+  }
+
+  try {
+    const parentRoot = window.parent.document.documentElement;
+    const parentBody = window.parent.document.body;
+
+    if (parentBody?.getAttribute("theme-mode") === "dark" || parentRoot.classList.contains("dark")) {
+      return "dark";
+    }
+
+    return "light";
+  } catch {
+    return null;
+  }
 }
 
 const ThemeContext = createContext<ThemeContextType>({
   theme: "system",
   setTheme: () => {},
   resolved: "dark",
+  isEmbedded: false,
 });
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setThemeState] = useState<Theme>("system");
-  const [resolved, setResolved] = useState<"light" | "dark">("dark");
+  const [isEmbedded, setIsEmbedded] = useState(getIsEmbedded);
+  const [parentResolved, setParentResolved] = useState<ResolvedTheme | null>(getParentResolvedTheme);
+  const [resolved, setResolved] = useState<ResolvedTheme>(
+    () => getParentResolvedTheme() ?? resolveStoredTheme("system", getPrefersDark()),
+  );
 
   useEffect(() => {
     const saved = localStorage.getItem("theme") as Theme | null;
     if (saved && ["light", "dark", "system"].includes(saved)) {
-      setThemeState(saved);
+      startTransition(() => {
+        setThemeState(saved);
+      });
     }
   }, []);
 
   useEffect(() => {
-    const resolve = () => {
-      if (theme === "system") {
-        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    const nextIsEmbedded = getIsEmbedded();
+    const nextParentResolved = getParentResolvedTheme();
+
+    startTransition(() => {
+      setIsEmbedded(nextIsEmbedded);
+      setParentResolved((current) => current ?? nextParentResolved);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!isEmbedded) {
+      return;
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.source !== window.parent) {
+        return;
+      }
+
+      const nextResolved = resolveIncomingThemeMode(
+        event.data?.themeMode,
+        window.matchMedia("(prefers-color-scheme: dark)").matches,
+      );
+      if (nextResolved) {
+        setParentResolved(nextResolved);
       }
-      return theme;
     };
 
-    const r = resolve();
-    setResolved(r);
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [isEmbedded]);
 
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const root = document.documentElement;
-    root.classList.remove("light", "dark");
-    root.classList.add(r);
-    root.setAttribute("data-theme", r);
 
-    if (theme === "system") {
-      const mq = window.matchMedia("(prefers-color-scheme: dark)");
-      const handler = () => {
-        const nr = mq.matches ? "dark" : "light";
-        setResolved(nr);
-        root.classList.remove("light", "dark");
-        root.classList.add(nr);
-        root.setAttribute("data-theme", nr);
-      };
-      mq.addEventListener("change", handler);
-      return () => mq.removeEventListener("change", handler);
+    const applyResolved = (nextResolved: ResolvedTheme) => {
+      setResolved(nextResolved);
+      root.classList.remove("light", "dark");
+      root.classList.add(nextResolved);
+      root.setAttribute("data-theme", nextResolved);
+    };
+
+    applyResolved(parentResolved ?? resolveStoredTheme(theme, mq.matches));
+
+    if (parentResolved !== null || theme !== "system") {
+      return;
     }
-  }, [theme]);
+
+    const handleSystemThemeChange = (event: MediaQueryListEvent) => {
+      applyResolved(resolveStoredTheme(theme, event.matches));
+    };
+
+    mq.addEventListener("change", handleSystemThemeChange);
+    return () => mq.removeEventListener("change", handleSystemThemeChange);
+  }, [parentResolved, theme]);
 
   const setTheme = (t: Theme) => {
     setThemeState(t);
@@ -63,7 +139,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   };
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme, resolved }}>
+    <ThemeContext.Provider value={{ theme, setTheme, resolved, isEmbedded }}>
       {children}
     </ThemeContext.Provider>
   );