fix: portal sync theme (#139)

Author: jeremy-babylonlabs

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]);