From 45dc8ca6b92a2b6b8fb45d7a2e975efd9392065c Mon Sep 17 00:00:00 2001
From: jeremy-babylonlabs <jeremy.t@babylonlabs.io>
Date: Fri, 18 Jul 2025 00:39:38 +0800
Subject: [PATCH] fix: portal sync theme

---
 src/components/Portal/Portal.tsx | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
index 16bf3fa..c4713be 100644
--- a/src/components/Portal/Portal.tsx
+++ b/src/components/Portal/Portal.tsx
@@ -20,7 +20,36 @@ export function Portal({ children, mounted = false, rootClassName = "portal-root
     setRootRef(root);
     document.body.appendChild(root);
 
+    // Sync dark/light classes or data-mode attribute from documentElement/body
+    const syncThemeClass = () => {
+      const isDark =
+        document.documentElement.classList.contains("dark") ||
+        document.body.classList.contains("dark") ||
+        document.documentElement.getAttribute("data-mode") === "dark" ||
+        document.body.getAttribute("data-mode") === "dark";
+      if (isDark) {
+        root.classList.add("dark");
+        root.setAttribute("data-mode", "dark");
+      } else {
+        root.classList.remove("dark");
+        root.setAttribute("data-mode", "light");
+      }
+    };
+
+    syncThemeClass();
+
+    const observer = new MutationObserver(syncThemeClass);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-mode"],
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class", "data-mode"],
+    });
+
     return () => {
+      observer.disconnect();
       document.body.removeChild(root);
     };
   }, [mounted]);