From d15f061dfe448a8c02e8cb1dbe117a5e16d13e41 Mon Sep 17 00:00:00 2001
From: Ashley Wright <ashley.wright@mx.com>
Date: Thu, 17 Sep 2026 13:06:49 -0600
Subject: [PATCH 1/2] fixed the issue with mismatched dark mode palette colors

---
 src/ConnectedTokenProvider.tsx | 41 ++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/ConnectedTokenProvider.tsx b/src/ConnectedTokenProvider.tsx
index 5a3fa8a734..66b75a6d5c 100644
--- a/src/ConnectedTokenProvider.tsx
+++ b/src/ConnectedTokenProvider.tsx
@@ -29,20 +29,33 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
     useMUIStandardSpacing: true,
   })
 
-  const kyperTokenOverrides = {
-    Color: {
-      Brand100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100],
-      Brand200: mxTheme.palette.primary.light,
-      Brand300: mxTheme.palette.primary.main,
-      Brand400: mxTheme.palette.primary.dark,
-      Brand500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900],
-      Primary100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100],
-      Primary200: mxTheme.palette.primary.light,
-      Primary300: mxTheme.palette.primary.main,
-      Primary400: mxTheme.palette.primary.dark,
-      Primary500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900],
-    },
-  }
+  const kyperTokenOverrides = React.useMemo(
+    () => ({
+      Color: {
+        Brand100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100],
+        Brand200: mxTheme.palette.primary.light,
+        Brand300: mxTheme.palette.primary.main,
+        Brand400: mxTheme.palette.primary.dark,
+        Brand500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900],
+        Primary100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100],
+        Primary200: mxTheme.palette.primary.light,
+        Primary300: mxTheme.palette.primary.main,
+        Primary400: mxTheme.palette.primary.dark,
+        Primary500: isDarkModeEnabled ? mxTheme.palette.primary[50] : mxTheme.palette.primary[900],
+      },
+      // MXUI owns our surface colors. Kyper's own background tokens disagree
+      // with it (#1F2329 vs #000000 in dark mode), so views still reading from
+      // Kyper paint a different color than MUI surfaces. Map these the same way the Color tokens above are mapped, so
+      // both systems agree while the Kyper migration finishes.
+      BackgroundColor: {
+        Body: mxTheme.palette.background.default,
+        Container: mxTheme.palette.background.paper,
+      },
+    }),
+    // TokenProvider keys a useEffect off this object's identity, so it has to
+    // be stable across renders.
+    [isDarkModeEnabled, mxTheme.palette.primary, mxTheme.palette.background],
+  )
 
   return (
     <TokenProvider

From 80d9107bf5ccd526942deff3da2b6c64bb72aac4 Mon Sep 17 00:00:00 2001
From: Ashley Wright <ashley.wright@mx.com>
Date: Thu, 17 Sep 2026 13:09:59 -0600
Subject: [PATCH 2/2] fix: fix mismatch in kyper and mui dark mode colors