feat: sync embedded analytics theme with parent app

2026-04-02 20:11:33 +08:00
parent 1b5977a420
commit cc66034e59
8 changed files with 219 additions and 44 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
--- a/README.md
+++ b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -30,8 +30,15 @@ export default function RootLayout({
      <head>
        <script dangerouslySetInnerHTML={{ __html: `
          (function(){
+            var parentTheme=null;
+            try{
+              if(window.self!==window.top){
+                var parentDoc=window.parent.document;
+                parentTheme=(parentDoc.body&&parentDoc.body.getAttribute('theme-mode')==='dark')||parentDoc.documentElement.classList.contains('dark')?'dark':'light';
+              }
+            }catch(e){}
            var t=localStorage.getItem('theme')||'system';
-            var r=t==='system'?window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light':t;
+            var r=parentTheme||(t==='system'?window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light':t);
            document.documentElement.classList.add(r);
            document.documentElement.setAttribute('data-theme',r);
          })();
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -10,7 +10,7 @@ import { useTheme, type Theme } from "@/lib/theme";
 export function Sidebar() {
  const pathname = usePathname();
  const { t, locale, setLocale } = useI18n();
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme, isEmbedded } = useTheme();

  const nav = [
    { href: "/", label: t("nav.overview"), icon: LayoutDashboard },
@@ -76,7 +76,7 @@ export function Sidebar() {

      {/* Controls */}
      <div className="space-y-3 p-4 border-t" style={{ borderColor: "var(--surface-border)" }}>
-        {/* Theme switcher */}
+        {!isEmbedded && (
          <div className="flex gap-1 rounded-lg p-0.5" style={{ background: "var(--row-hover)", border: "1px solid var(--surface-border)" }}>
            {themes.map(({ value, icon: Icon }) => (
              <button key={value} onClick={() => setTheme(value)}
@@ -92,6 +92,7 @@ export function Sidebar() {
              </button>
            ))}
          </div>
+        )}

        {/* Language switcher */}
        <button
--- a/lib/theme-sync.test.ts
+++ b/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();
+  });
+});
--- a/lib/theme-sync.ts
+++ b/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;
+}
--- a/lib/theme.tsx
+++ b/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)) {
+      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]);

-    const root = document.documentElement;
-    root.classList.remove("light", "dark");
-    root.classList.add(r);
-    root.setAttribute("data-theme", r);
-
-    if (theme === "system") {
+  useEffect(() => {
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-      const handler = () => {
-        const nr = mq.matches ? "dark" : "light";
-        setResolved(nr);
+    const root = document.documentElement;
+
+    const applyResolved = (nextResolved: ResolvedTheme) => {
+      setResolved(nextResolved);
      root.classList.remove("light", "dark");
-        root.classList.add(nr);
-        root.setAttribute("data-theme", nr);
+      root.classList.add(nextResolved);
+      root.setAttribute("data-theme", nextResolved);
    };
-      mq.addEventListener("change", handler);
-      return () => mq.removeEventListener("change", handler);
+
+    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>
  );