From ffb5987977386ebcd2e85cc5bdb4425f51ab2850 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Fri, 24 Jul 2026 16:56:59 -0700
Subject: [PATCH 1/2] fix Windows thread edge background

---
 apps/web/index.html                 |  8 +++---
 apps/web/src/hooks/useTheme.test.ts | 42 +++++++++++++++++++++++++++++
 apps/web/src/hooks/useTheme.ts      | 15 +++--------
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/apps/web/index.html b/apps/web/index.html
index dadef17d3bc..eccee92878b 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -7,14 +7,14 @@
       content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
     />
     <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#161616" media="(prefers-color-scheme: dark)" />
-    <meta name="theme-color" content="#161616" />
+    <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#0a0a0a" />
     <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <script>
       (() => {
         const LIGHT_BACKGROUND = "#ffffff";
-        const DARK_BACKGROUND = "#161616";
+        const DARK_BACKGROUND = "#0a0a0a";
         const themeColorMeta = document.querySelector('meta[name="theme-color"]');
         try {
           const storedTheme = window.localStorage.getItem("t3code:theme");
@@ -58,7 +58,7 @@
       }
 
       html.dark body {
-        background: #161616;
+        background: #0a0a0a;
         color: #f5f5f5;
       }
 
diff --git a/apps/web/src/hooks/useTheme.test.ts b/apps/web/src/hooks/useTheme.test.ts
index 6c814e30165..84235918b3d 100644
--- a/apps/web/src/hooks/useTheme.test.ts
+++ b/apps/web/src/hooks/useTheme.test.ts
@@ -27,6 +27,48 @@ afterEach(() => {
 });
 
 describe("theme failure handling", () => {
+  it("syncs browser chrome from the stable app token during route surface gaps", async () => {
+    const dynamicMeta = {
+      setAttribute: vi.fn(),
+    };
+    const documentElement = {
+      classList: { toggle: vi.fn() },
+      style: { backgroundColor: "#161616" },
+    };
+    const body = {
+      style: { backgroundColor: "#161616" },
+    };
+    vi.stubGlobal("window", {
+      localStorage: createStorage(),
+      matchMedia: () => ({ matches: true }),
+    });
+    vi.stubGlobal("document", {
+      body,
+      documentElement,
+      head: { append: vi.fn() },
+      querySelector: (selector: string) =>
+        selector.includes("data-dynamic-theme-color") ? dynamicMeta : null,
+    });
+    vi.stubGlobal("getComputedStyle", (element: unknown) => ({
+      backgroundColor: element === body ? "rgb(22, 22, 22)" : "rgb(0, 0, 0)",
+      getPropertyValue: (property: string) =>
+        element === documentElement && property === "--app-chrome-background"
+          ? "rgb(10, 10, 10)"
+          : "",
+    }));
+
+    const { syncBrowserChromeTheme } = await import("./useTheme");
+    documentElement.style.backgroundColor = "#161616";
+    body.style.backgroundColor = "#161616";
+    dynamicMeta.setAttribute.mockClear();
+
+    syncBrowserChromeTheme();
+
+    expect(documentElement.style.backgroundColor).toBe("rgb(10, 10, 10)");
+    expect(body.style.backgroundColor).toBe("rgb(10, 10, 10)");
+    expect(dynamicMeta.setAttribute).toHaveBeenCalledWith("content", "rgb(10, 10, 10)");
+  });
+
   it("preserves exact storage causes and operation context", async () => {
     const readCause = new Error("storage read blocked");
     const writeCause = new Error("storage quota exceeded");
diff --git a/apps/web/src/hooks/useTheme.ts b/apps/web/src/hooks/useTheme.ts
index bdaf37f099d..7103d3e4bcb 100644
--- a/apps/web/src/hooks/useTheme.ts
+++ b/apps/web/src/hooks/useTheme.ts
@@ -20,6 +20,7 @@ const DEFAULT_THEME_SNAPSHOT: ThemeSnapshot = {
 };
 const THEME_COLOR_META_NAME = "theme-color";
 const DYNAMIC_THEME_COLOR_SELECTOR = `meta[name="${THEME_COLOR_META_NAME}"][data-dynamic-theme-color="true"]`;
+const APP_CHROME_BACKGROUND_PROPERTY = "--app-chrome-background";
 
 export class ThemeStorageError extends Schema.TaggedErrorClass<ThemeStorageError>()(
   "ThemeStorageError",
@@ -151,21 +152,13 @@ function normalizeThemeColor(value: string | null | undefined): string | null {
   return value?.trim() ?? null;
 }
 
-function resolveBrowserChromeSurface(): HTMLElement {
-  return (
-    document.querySelector<HTMLElement>("main[data-slot='sidebar-inset']") ??
-    document.querySelector<HTMLElement>("[data-slot='sidebar-inner']") ??
-    document.body
-  );
-}
-
 export function syncBrowserChromeTheme() {
   if (typeof document === "undefined" || typeof getComputedStyle === "undefined") return;
-  const surfaceColor = normalizeThemeColor(
-    getComputedStyle(resolveBrowserChromeSurface()).backgroundColor,
+  const appChromeColor = normalizeThemeColor(
+    getComputedStyle(document.documentElement).getPropertyValue(APP_CHROME_BACKGROUND_PROPERTY),
   );
   const fallbackColor = normalizeThemeColor(getComputedStyle(document.body).backgroundColor);
-  const backgroundColor = surfaceColor ?? fallbackColor;
+  const backgroundColor = appChromeColor ?? fallbackColor;
   if (!backgroundColor) return;
 
   document.documentElement.style.backgroundColor = backgroundColor;

From 06bffed09e15b469ce29f79af25b2ed743dd11c9 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Fri, 24 Jul 2026 17:23:31 -0700
Subject: [PATCH 2/2] remove Windows edge regression test

---
 apps/web/src/hooks/useTheme.test.ts | 42 -----------------------------
 1 file changed, 42 deletions(-)

diff --git a/apps/web/src/hooks/useTheme.test.ts b/apps/web/src/hooks/useTheme.test.ts
index 84235918b3d..6c814e30165 100644
--- a/apps/web/src/hooks/useTheme.test.ts
+++ b/apps/web/src/hooks/useTheme.test.ts
@@ -27,48 +27,6 @@ afterEach(() => {
 });
 
 describe("theme failure handling", () => {
-  it("syncs browser chrome from the stable app token during route surface gaps", async () => {
-    const dynamicMeta = {
-      setAttribute: vi.fn(),
-    };
-    const documentElement = {
-      classList: { toggle: vi.fn() },
-      style: { backgroundColor: "#161616" },
-    };
-    const body = {
-      style: { backgroundColor: "#161616" },
-    };
-    vi.stubGlobal("window", {
-      localStorage: createStorage(),
-      matchMedia: () => ({ matches: true }),
-    });
-    vi.stubGlobal("document", {
-      body,
-      documentElement,
-      head: { append: vi.fn() },
-      querySelector: (selector: string) =>
-        selector.includes("data-dynamic-theme-color") ? dynamicMeta : null,
-    });
-    vi.stubGlobal("getComputedStyle", (element: unknown) => ({
-      backgroundColor: element === body ? "rgb(22, 22, 22)" : "rgb(0, 0, 0)",
-      getPropertyValue: (property: string) =>
-        element === documentElement && property === "--app-chrome-background"
-          ? "rgb(10, 10, 10)"
-          : "",
-    }));
-
-    const { syncBrowserChromeTheme } = await import("./useTheme");
-    documentElement.style.backgroundColor = "#161616";
-    body.style.backgroundColor = "#161616";
-    dynamicMeta.setAttribute.mockClear();
-
-    syncBrowserChromeTheme();
-
-    expect(documentElement.style.backgroundColor).toBe("rgb(10, 10, 10)");
-    expect(body.style.backgroundColor).toBe("rgb(10, 10, 10)");
-    expect(dynamicMeta.setAttribute).toHaveBeenCalledWith("content", "rgb(10, 10, 10)");
-  });
-
   it("preserves exact storage causes and operation context", async () => {
     const readCause = new Error("storage read blocked");
     const writeCause = new Error("storage quota exceeded");