From bca22da5f88f46d3ae337d383d41f046d7a1e79e Mon Sep 17 00:00:00 2001
From: nnti3n <thienphong215@gmail.com>
Date: Wed, 7 Jan 2026 12:09:07 +0700
Subject: [PATCH 1/3] Fix dark theme to inherit from html.dark class

Use CSS selector html.dark .b3-root to support next-themes
---
 .../src/anyspend/react/components/common/OrderHistory.tsx  | 7 ++++++-
 .../sdk/src/global-account/react/components/StyleRoot.tsx  | 5 +----
 packages/sdk/src/styles/index.css                          | 3 +--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx b/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
index a72f1756..a1126c2d 100644
--- a/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
+++ b/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
@@ -19,7 +19,12 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
 
   return (
     <>
-      <ModalHeader title="Order History" showCloseButton={false} handleBack={onBack} className="w-full">
+      <ModalHeader
+        title="Order History"
+        showCloseButton={false}
+        handleBack={onBack}
+        className="dark:bg-as-surface-primary w-full"
+      >
         <Button
           variant="ghost"
           size="icon"
diff --git a/packages/sdk/src/global-account/react/components/StyleRoot.tsx b/packages/sdk/src/global-account/react/components/StyleRoot.tsx
index f0eb0bd4..631d92a2 100644
--- a/packages/sdk/src/global-account/react/components/StyleRoot.tsx
+++ b/packages/sdk/src/global-account/react/components/StyleRoot.tsx
@@ -1,11 +1,8 @@
 import { PropsWithChildren } from "react";
-import { useB3Config } from "./B3Provider/useB3Config";
 
 export function StyleRoot({ children, id }: PropsWithChildren<{ id?: string }>) {
-  const { theme } = useB3Config();
-
   return (
-    <div className="b3-root" id={id} data-theme={theme}>
+    <div className="b3-root" id={id}>
       {children}
     </div>
   );
diff --git a/packages/sdk/src/styles/index.css b/packages/sdk/src/styles/index.css
index 68194a68..bcfe1461 100644
--- a/packages/sdk/src/styles/index.css
+++ b/packages/sdk/src/styles/index.css
@@ -179,8 +179,7 @@
   --fg-quaternary: #a0a0ab;
 }
 
-html[data-theme="dark"] .b3-root,
-.b3-root[data-theme="dark"] {
+html.dark .b3-root {
   /* Dark theme variables */
   --b3-react-background: 0 0% 10%;
   --b3-react-foreground: 0 0% 90%;

From 72a063d75d93eb35c196f2aa44f2eec53cdb8a9d Mon Sep 17 00:00:00 2001
From: nnti3n <thienphong215@gmail.com>
Date: Wed, 7 Jan 2026 21:02:27 +0700
Subject: [PATCH 2/3] Add backward compatible dark theme support

Support multiple dark theme selectors:
- html.dark .b3-root (next-themes with class attribute)
- html[data-theme="dark"] .b3-root (next-themes with data attribute)
- .b3-root[data-theme="dark"] (B3Provider theme prop)
- .b3-root.dark (manual dark class)
---
 .../sdk/src/global-account/react/components/StyleRoot.tsx    | 5 ++++-
 packages/sdk/src/styles/index.css                            | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/sdk/src/global-account/react/components/StyleRoot.tsx b/packages/sdk/src/global-account/react/components/StyleRoot.tsx
index 631d92a2..f0eb0bd4 100644
--- a/packages/sdk/src/global-account/react/components/StyleRoot.tsx
+++ b/packages/sdk/src/global-account/react/components/StyleRoot.tsx
@@ -1,8 +1,11 @@
 import { PropsWithChildren } from "react";
+import { useB3Config } from "./B3Provider/useB3Config";
 
 export function StyleRoot({ children, id }: PropsWithChildren<{ id?: string }>) {
+  const { theme } = useB3Config();
+
   return (
-    <div className="b3-root" id={id}>
+    <div className="b3-root" id={id} data-theme={theme}>
       {children}
     </div>
   );
diff --git a/packages/sdk/src/styles/index.css b/packages/sdk/src/styles/index.css
index bcfe1461..27c72f0c 100644
--- a/packages/sdk/src/styles/index.css
+++ b/packages/sdk/src/styles/index.css
@@ -179,7 +179,10 @@
   --fg-quaternary: #a0a0ab;
 }
 
-html.dark .b3-root {
+html.dark .b3-root,
+html[data-theme="dark"] .b3-root,
+.b3-root[data-theme="dark"],
+.b3-root.dark {
   /* Dark theme variables */
   --b3-react-background: 0 0% 10%;
   --b3-react-foreground: 0 0% 90%;

From 2d59af7f8db03f6c3a55ce3cc9ff27bb452ab196 Mon Sep 17 00:00:00 2001
From: nnti3n <thienphong215@gmail.com>
Date: Wed, 7 Jan 2026 22:08:09 +0700
Subject: [PATCH 3/3] Fix missing styling

---
 .../src/anyspend/react/components/AnySpendDeposit.tsx  | 10 +++++-----
 .../anyspend/react/components/common/OrderHistory.tsx  |  7 +------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx b/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx
index d8f019d6..aae86931 100644
--- a/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx
+++ b/packages/sdk/src/anyspend/react/components/AnySpendDeposit.tsx
@@ -424,7 +424,7 @@ export function AnySpendDeposit({
                   key={i}
                   className={
                     depositClasses?.skeletonItem ||
-                    "border-border-primary flex items-center justify-between rounded-xl border p-4"
+                    "border-border-secondary flex items-center justify-between rounded-xl border p-4"
                   }
                 >
                   <div className="flex items-center gap-3">
@@ -449,7 +449,7 @@ export function AnySpendDeposit({
                   onClick={() => handleSelectChain(chain.id)}
                   className={
                     depositClasses?.chainButton ||
-                    "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                    "anyspend-deposit-chain-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
                   }
                 >
                   <div className={depositClasses?.chainContent || "anyspend-deposit-chain-content"}>
@@ -489,7 +489,7 @@ export function AnySpendDeposit({
               onClick={handleSelectCrypto}
               className={
                 depositClasses?.cryptoButton ||
-                "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
               }
             >
               <div className={depositClasses?.optionContent || "anyspend-deposit-option-content"}>
@@ -531,7 +531,7 @@ export function AnySpendDeposit({
               onClick={handleSelectQrDeposit}
               className={
                 depositClasses?.qrButton ||
-                "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
               }
             >
               <div
@@ -566,7 +566,7 @@ export function AnySpendDeposit({
               onClick={handleSelectFiat}
               className={
                 depositClasses?.fiatButton ||
-                "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
+                "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-secondary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
               }
             >
               <div
diff --git a/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx b/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
index a1126c2d..3db08cde 100644
--- a/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
+++ b/packages/sdk/src/anyspend/react/components/common/OrderHistory.tsx
@@ -19,12 +19,7 @@ export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps)
 
   return (
     <>
-      <ModalHeader
-        title="Order History"
-        showCloseButton={false}
-        handleBack={onBack}
-        className="dark:bg-as-surface-primary w-full"
-      >
+      <ModalHeader title="Order History" showCloseButton={false} handleBack={onBack} className="w-full bg-transparent">
         <Button
           variant="ghost"
           size="icon"