From 78a8309cad73e3ee0d3b2ab0e64d1b6a18fd0eab Mon Sep 17 00:00:00 2001
From: Rahul Anand <41159815+rahulnsanand@users.noreply.github.com>
Date: Sun, 27 Sep 2026 17:02:10 +0530
Subject: [PATCH] fix: mount a Dialog only once its theme is read

---
 packages/luthor/src/core/ui.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/luthor/src/core/ui.tsx b/packages/luthor/src/core/ui.tsx
index 9f8a0c7..c577219 100644
--- a/packages/luthor/src/core/ui.tsx
+++ b/packages/luthor/src/core/ui.tsx
@@ -416,6 +416,8 @@ export function Dialog({
   useLayoutEffect(() => {
     if (isOpen && anchorRef.current) {
       setThemeStyle(getOverlayThemeStyleFromElement(anchorRef.current));
+    } else if (!isOpen) {
+      setThemeStyle(undefined);
     }
   }, [isOpen]);
 
@@ -444,7 +446,10 @@ export function Dialog({
   }, [isOpen, onClose]);
 
   const anchor = <span ref={anchorRef} className="luthor-dialog-anchor" hidden />;
-  if (!isOpen || typeof document === "undefined") return anchor;
+  // Mount the portal only once the theme is read: a first paint without it had
+  // no background, and the theme transition then faded the panel in from
+  // transparent.
+  if (!isOpen || !themeStyle || typeof document === "undefined") return anchor;
 
   const overlay = (
     <div className="luthor-dialog-overlay luthor-dialog-overlay--portal" style={themeStyle}>