From 28424a98361005798fd257717f0aa023ec17bea4 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Thu, 6 Jun 2024 21:45:52 +0530
Subject: [PATCH] Fix custom theme not used in ConnectEmbed loading screen

---
 .changeset/strange-hounds-draw.md                   |  5 +++++
 .../web/ui/ConnectWallet/Modal/ConnectEmbed.tsx     | 13 +++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/strange-hounds-draw.md

diff --git a/.changeset/strange-hounds-draw.md b/.changeset/strange-hounds-draw.md
new file mode 100644
index 00000000000..c423afcf474
--- /dev/null
+++ b/.changeset/strange-hounds-draw.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix custom theme not used in ConnectEmbed loading screen
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
index 2fa7b456d9f..0918f9c8d54 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
@@ -5,7 +5,10 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../../wallets/types.js";
-import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../../../../core/design-system/CustomThemeProvider.js";
 import { type Theme, radius } from "../../../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
@@ -374,9 +377,11 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
       return (
         <>
           {autoConnectComp}
-          <EmbedContainer modalSize={modalSize}>
-            <LoadingScreen />
-          </EmbedContainer>
+          <CustomThemeProvider theme={props.theme || "dark"}>
+            <EmbedContainer modalSize={modalSize}>
+              <LoadingScreen />
+            </EmbedContainer>
+          </CustomThemeProvider>
         </>
       );
     }