From c0fe9c6d55fffff448eaae8bc2cd93a62896f2f8 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Fri, 11 Jul 2025 02:03:49 +0530
Subject: [PATCH] [TOOL-5021] SDK: Fix theme in ConnectButton Details Modal Buy
 screen

---
 .changeset/ten-places-feel.md                         |  5 +++++
 .../src/react/web/ui/ConnectWallet/Details.tsx        |  5 +++++
 .../src/stories/ConnectButton/themes.stories.tsx      | 11 +++++++++++
 3 files changed, 21 insertions(+)
 create mode 100644 .changeset/ten-places-feel.md

diff --git a/.changeset/ten-places-feel.md b/.changeset/ten-places-feel.md
new file mode 100644
index 00000000000..97d34801d9c
--- /dev/null
+++ b/.changeset/ten-places-feel.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix theme in ConnectButton Details Modal Buy screen
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
index 5fbe9b2aa7f..9ec76170153 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -978,6 +978,11 @@ export function DetailsModal(props: {
         onCancel={() => setScreen("main")}
         onSuccess={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
+        theme={props.theme}
+        style={{
+          border: "none",
+          borderRadius: radius.lg,
+        }}
         tokenAddress={
           props.displayBalanceToken?.[Number(requestedChainId)] as
             | `0x${string}`
diff --git a/packages/thirdweb/src/stories/ConnectButton/themes.stories.tsx b/packages/thirdweb/src/stories/ConnectButton/themes.stories.tsx
index b32008417af..8e426726bd5 100644
--- a/packages/thirdweb/src/stories/ConnectButton/themes.stories.tsx
+++ b/packages/thirdweb/src/stories/ConnectButton/themes.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { darkTheme } from "../../react/core/design-system/index.js";
 import { ConnectButton } from "../../react/web/ui/ConnectWallet/ConnectButton.js";
 import { storyClient } from "../utils.js";
 
@@ -27,4 +28,14 @@ export const Light: Story = {
   },
 };
 
+export const CustomBlack: Story = {
+  args: {
+    theme: darkTheme({
+      colors: {
+        modalBg: "black",
+      },
+    }),
+  },
+};
+
 export default meta;