From d052d481d8c953b8728d82d3f27b2bbd0d26ac79 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sat, 28 Feb 2026 11:10:11 -0800
Subject: [PATCH] Move diff theme overrides into DiffPanel unsafeCSS

- Inject diff palette overrides via `unsafeCSS` in `DiffPanel`
- Add `diff-panel-viewport` background and keep file container border/background styling in `index.css`
- Switch panel root from `bg-card` to `bg-background` for consistent surface tone
---
 apps/web/src/components/DiffPanel.tsx | 49 +++++++++++++++++++++++++--
 apps/web/src/index.css                | 42 +++--------------------
 2 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index d45ef6a26c5a65498e3f5ddd97ef9daa6f46d1a7..34f8bde99c19a72f6ab7db02aec088a798a4cc0d 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -19,6 +19,47 @@ import { ToggleGroup, Toggle } from "./ui/toggle-group";
 type DiffRenderMode = "stacked" | "split";
 type DiffThemeType = "light" | "dark";
 
+const DIFF_PANEL_UNSAFE_CSS = `
+[data-diffs-header],
+[data-diff],
+[data-file],
+[data-error-wrapper],
+[data-virtualizer-buffer] {
+  --diffs-bg: color-mix(in srgb, var(--card) 90%, var(--background)) !important;
+  --diffs-light-bg: color-mix(in srgb, var(--card) 90%, var(--background)) !important;
+  --diffs-dark-bg: color-mix(in srgb, var(--card) 90%, var(--background)) !important;
+  --diffs-token-light-bg: transparent;
+  --diffs-token-dark-bg: transparent;
+
+  --diffs-bg-context-override: color-mix(in srgb, var(--background) 97%, var(--foreground));
+  --diffs-bg-hover-override: color-mix(in srgb, var(--background) 94%, var(--foreground));
+  --diffs-bg-separator-override: color-mix(in srgb, var(--background) 95%, var(--foreground));
+  --diffs-bg-buffer-override: color-mix(in srgb, var(--background) 90%, var(--foreground));
+
+  --diffs-bg-addition-override: color-mix(in srgb, var(--background) 92%, var(--success));
+  --diffs-bg-addition-number-override: color-mix(in srgb, var(--background) 88%, var(--success));
+  --diffs-bg-addition-hover-override: color-mix(in srgb, var(--background) 85%, var(--success));
+  --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--background) 80%, var(--success));
+
+  --diffs-bg-deletion-override: color-mix(in srgb, var(--background) 92%, var(--destructive));
+  --diffs-bg-deletion-number-override: color-mix(in srgb, var(--background) 88%, var(--destructive));
+  --diffs-bg-deletion-hover-override: color-mix(in srgb, var(--background) 85%, var(--destructive));
+  --diffs-bg-deletion-emphasis-override: color-mix(
+    in srgb,
+    var(--background) 80%,
+    var(--destructive)
+  );
+
+  background-color: var(--diffs-bg) !important;
+}
+
+[data-file-info] {
+  background-color: color-mix(in srgb, var(--card) 94%, var(--foreground)) !important;
+  border-block-color: var(--border) !important;
+  color: var(--foreground) !important;
+}
+`;
+
 type RenderablePatch =
   | {
       kind: "files";
@@ -422,7 +463,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
   return (
     <div
       className={cn(
-        "flex h-full min-w-0 flex-col bg-card",
+        "flex h-full min-w-0 flex-col bg-background",
         mode === "inline"
           ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
           : "w-full",
@@ -446,7 +487,10 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
         </div>
       ) : (
         <>
-          <div ref={patchViewportRef} className="min-h-0 min-w-0 flex-1 overflow-hidden">
+          <div
+            ref={patchViewportRef}
+            className="diff-panel-viewport min-h-0 min-w-0 flex-1 overflow-hidden"
+          >
             {checkpointDiffError && !renderablePatch && (
               <div className="px-3">
                 <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>
@@ -487,6 +531,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
                           lineDiffType: "none",
                           theme: resolveDiffThemeName(resolvedTheme),
                           themeType: resolvedTheme as DiffThemeType,
+                          unsafeCSS: DIFF_PANEL_UNSAFE_CSS,
                         }}
                       />
                     </div>
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 274c1d739e72d12e8e926f42abcf56ff14d0a35d..3cdadb01fd4997784cdabae9dce9453b2041b65c 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -331,47 +331,13 @@ label:has(> select#reasoning-effort) select {
 }
 
 /* Diffs theme bridge (match diff surfaces to app palette) */
-.diff-render-surface [data-diffs-header],
-.diff-render-surface [data-diff],
-.diff-render-surface [data-file],
-.diff-render-surface [data-error-wrapper],
-.diff-render-surface [data-virtualizer-buffer] {
-  --diffs-light-bg: color-mix(in srgb, var(--card) 92%, var(--background));
-  --diffs-dark-bg: color-mix(in srgb, var(--card) 92%, var(--background));
-
-  --diffs-bg-context-override: color-mix(in srgb, var(--background) 97%, var(--foreground));
-  --diffs-bg-hover-override: color-mix(in srgb, var(--background) 94%, var(--foreground));
-  --diffs-bg-separator-override: color-mix(in srgb, var(--background) 95%, var(--foreground));
-  --diffs-bg-buffer-override: color-mix(in srgb, var(--background) 90%, var(--foreground));
-
-  --diffs-bg-addition-override: color-mix(in srgb, var(--background) 92%, var(--success));
-  --diffs-bg-addition-number-override: color-mix(in srgb, var(--background) 88%, var(--success));
-  --diffs-bg-addition-hover-override: color-mix(in srgb, var(--background) 85%, var(--success));
-  --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--background) 80%, var(--success));
-
-  --diffs-bg-deletion-override: color-mix(in srgb, var(--background) 92%, var(--destructive));
-  --diffs-bg-deletion-number-override: color-mix(
-    in srgb,
-    var(--background) 88%,
-    var(--destructive)
-  );
-  --diffs-bg-deletion-hover-override: color-mix(in srgb, var(--background) 85%, var(--destructive));
-  --diffs-bg-deletion-emphasis-override: color-mix(
-    in srgb,
-    var(--background) 80%,
-    var(--destructive)
-  );
-}
-
-.diff-render-surface [data-file-info] {
-  background-color: color-mix(in srgb, var(--card) 94%, var(--foreground)) !important;
-  border-block-color: var(--border) !important;
-  color: var(--foreground) !important;
+.diff-panel-viewport {
+  background: color-mix(in srgb, var(--background) 94%, var(--card));
 }
 
-.diff-render-file [data-diff],
-.diff-render-file [data-file] {
+.diff-render-file {
   border: 1px solid var(--border);
   border-radius: 0.5rem;
   overflow: clip;
+  background: color-mix(in srgb, var(--card) 92%, var(--background));
 }
-- 
2.54.0