diff --git a/packages/kilo-vscode/tests/unit/agent-manager-arch.test.ts b/packages/kilo-vscode/tests/unit/agent-manager-arch.test.ts
index e3dd5b33b2..96f7785e96 100644
--- a/packages/kilo-vscode/tests/unit/agent-manager-arch.test.ts
+++ b/packages/kilo-vscode/tests/unit/agent-manager-arch.test.ts
@@ -61,9 +61,14 @@ describe("Agent Manager CSS Prefix", () => {
     const matches = [...css.matchAll(/\.([a-z][a-z0-9-]*)/gi)]
     const names = [...new Set(matches.map((m) => m[1]))]
 
-    // VS Code sets these body classes on webview elements — they are scoping
-    // selectors for high contrast theme support, not agent-manager classes.
-    const host = new Set(["vscode-high-contrast", "vscode-high-contrast-light"])
+    // Exceptions:
+    // - VS Code sets these body classes on webview elements (scoping
+    //   selectors for high contrast theme support).
+    // - `kilo-diff-theme` is the shared Pierre diff theme utility defined
+    //   in webview-ui/src/styles/diff.css and reused across webviews.
+    // - `css` is matched from `@import "./diff.css"` file extension, not a
+    //   class selector.
+    const host = new Set(["vscode-high-contrast", "vscode-high-contrast-light", "kilo-diff-theme", "css"])
     const invalid = names.filter((n) => !n!.startsWith("am-") && !host.has(n!))
 
     expect(invalid, `Classes missing "am-" prefix: ${invalid.join(", ")}`).toEqual([])
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx b/packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx
index 261ebad498..531eb3c49d 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx
+++ b/packages/kilo-vscode/webview-ui/agent-manager/DiffPanel.tsx
@@ -327,7 +327,13 @@ export const DiffPanel: Component<DiffPanelProps> = (props) => {
   }))
 
   return (
-    <div class="am-diff-panel" onKeyDown={handleKeyDown} onMouseDown={handleRootMouseDown} tabIndex={-1} ref={rootRef}>
+    <div
+      class="am-diff-panel kilo-diff-theme"
+      onKeyDown={handleKeyDown}
+      onMouseDown={handleRootMouseDown}
+      tabIndex={-1}
+      ref={rootRef}
+    >
       <div class="am-diff-header">
         <div class="am-diff-header-main">
           <span class="am-diff-header-title">{t("session.review.change.other")}</span>
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/FullScreenDiffView.tsx b/packages/kilo-vscode/webview-ui/agent-manager/FullScreenDiffView.tsx
index c1d433b891..18b71868ec 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/FullScreenDiffView.tsx
+++ b/packages/kilo-vscode/webview-ui/agent-manager/FullScreenDiffView.tsx
@@ -403,7 +403,7 @@ export const FullScreenDiffView: Component<FullScreenDiffViewProps> = (props) =>
 
   return (
     <div
-      class="am-review-layout"
+      class="am-review-layout kilo-diff-theme"
       onKeyDown={handleKeyDown}
       onMouseDown={handleRootMouseDown}
       tabIndex={-1}
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager-review.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager-review.css
index 2e13e45824..948dbaebc6 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager-review.css
+++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager-review.css
@@ -24,39 +24,6 @@
   min-height: 0;
   min-width: 0;
   --am-diff-count-size: 12px;
-  /* Inherit pierre diffs CSS vars from am-diff-panel */
-  --diffs-light-bg: var(--vscode-editor-background, #1e1e1e);
-  --diffs-dark-bg: var(--vscode-editor-background, #1e1e1e);
-  --diffs-bg-addition-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 82%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-addition-number-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 72%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-addition-emphasis-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 60%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-deletion-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 82%,
-    var(--syntax-diff-delete, #da3319)
-  );
-  --diffs-bg-deletion-number-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 72%,
-    var(--syntax-diff-delete, #da3319)
-  );
-  --diffs-bg-deletion-emphasis-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 60%,
-    var(--syntax-diff-delete, #da3319)
-  );
 }
 
 /* Review toolbar */
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
index b15f77350a..a36f8f8128 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
+++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
@@ -1,3 +1,5 @@
+@import "../src/styles/diff.css";
+
 /* Agent Manager layout */
 
 .am-layout {
@@ -1384,46 +1386,6 @@ body.am-wt-dragging-active * {
   flex: 1;
   width: 100%;
   min-height: 0;
-  /* Pierre diffs needs --diffs-light-bg/--diffs-dark-bg for the color-mix()
-     calculations that produce red/green line backgrounds. Without a Shiki
-     worker pool these are never set by the theme layer, so we provide
-     fallbacks mapped to VS Code's editor background. */
-  --diffs-light-bg: var(--vscode-editor-background, #1e1e1e);
-  --diffs-dark-bg: var(--vscode-editor-background, #1e1e1e);
-  /* The unsafeCSS in @opencode-ai/ui uses 98%/92% mix ratios for line
-     backgrounds — only 2-8% tint, nearly invisible. Override via the
-     *-override custom properties that the unsafeCSS checks first.
-     These inherit across the Shadow DOM boundary. */
-  --diffs-bg-addition-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 82%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-addition-number-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 72%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-addition-emphasis-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 60%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-deletion-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 82%,
-    var(--syntax-diff-delete, #da3319)
-  );
-  --diffs-bg-deletion-number-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 72%,
-    var(--syntax-diff-delete, #da3319)
-  );
-  --diffs-bg-deletion-emphasis-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 60%,
-    var(--syntax-diff-delete, #da3319)
-  );
   --am-diff-count-size: 12px;
 }
 
@@ -3309,39 +3271,6 @@ body.am-wt-dragging-active * {
   min-height: 0;
   min-width: 0;
   --am-diff-count-size: 12px;
-  /* Inherit pierre diffs CSS vars from am-diff-panel */
-  --diffs-light-bg: var(--vscode-editor-background, #1e1e1e);
-  --diffs-dark-bg: var(--vscode-editor-background, #1e1e1e);
-  --diffs-bg-addition-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 82%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-addition-number-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 72%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-addition-emphasis-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 60%,
-    var(--syntax-diff-add, #318430)
-  );
-  --diffs-bg-deletion-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 82%,
-    var(--syntax-diff-delete, #da3319)
-  );
-  --diffs-bg-deletion-number-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 72%,
-    var(--syntax-diff-delete, #da3319)
-  );
-  --diffs-bg-deletion-emphasis-override: color-mix(
-    in lab,
-    var(--vscode-editor-background, #1e1e1e) 60%,
-    var(--syntax-diff-delete, #da3319)
-  );
 }
 
 /* Review toolbar */
diff --git a/packages/kilo-vscode/webview-ui/diff-virtual/DiffVirtualApp.tsx b/packages/kilo-vscode/webview-ui/diff-virtual/DiffVirtualApp.tsx
index af5f6d77bd..4d5f6fbe56 100644
--- a/packages/kilo-vscode/webview-ui/diff-virtual/DiffVirtualApp.tsx
+++ b/packages/kilo-vscode/webview-ui/diff-virtual/DiffVirtualApp.tsx
@@ -75,7 +75,7 @@ const DiffVirtualContent: Component = () => {
   })
 
   return (
-    <div class="am-review-layout">
+    <div class="am-review-layout kilo-diff-theme">
       <Show when={diff()}>
         {(d) => (
           <>
diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDiff.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDiff.tsx
index fb836489fe..662d731f72 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDiff.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/PermissionDiff.tsx
@@ -69,7 +69,7 @@ export const PermissionDiff: Component<PermissionDiffProps> = (props) => {
   }
 
   return (
-    <div data-slot="permission-diff">
+    <div data-slot="permission-diff" class="kilo-diff-theme">
       <div data-slot="permission-diff-header">
         <div data-slot="permission-diff-file-info">
           <div data-slot="permission-diff-icon">
diff --git a/packages/kilo-vscode/webview-ui/src/styles/chat.css b/packages/kilo-vscode/webview-ui/src/styles/chat.css
index a40375411c..7118e4d20b 100644
--- a/packages/kilo-vscode/webview-ui/src/styles/chat.css
+++ b/packages/kilo-vscode/webview-ui/src/styles/chat.css
@@ -13,6 +13,7 @@
 @import "./prompt-input.css";
 @import "./prompt-dropdowns.css";
 @import "./model-selector.css";
+@import "./diff.css";
 @import "./permission-dock.css";
 @import "./dialogs.css";
 @import "./history.css";
diff --git a/packages/kilo-vscode/webview-ui/src/styles/diff.css b/packages/kilo-vscode/webview-ui/src/styles/diff.css
new file mode 100644
index 0000000000..bb1a1588cd
--- /dev/null
+++ b/packages/kilo-vscode/webview-ui/src/styles/diff.css
@@ -0,0 +1,46 @@
+.kilo-diff-theme {
+  --diffs-light-bg: var(--vscode-editor-background, #1e1e1e);
+  --diffs-dark-bg: var(--vscode-editor-background, #1e1e1e);
+
+  --diffs-bg-addition-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 82%,
+    var(--syntax-diff-add, #318430)
+  );
+  --diffs-bg-addition-number-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 72%,
+    var(--syntax-diff-add, #318430)
+  );
+  --diffs-bg-addition-emphasis-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 60%,
+    var(--syntax-diff-add, #318430)
+  );
+  --diffs-bg-addition-hover-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 72%,
+    var(--syntax-diff-add, #318430)
+  );
+
+  --diffs-bg-deletion-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 82%,
+    var(--syntax-diff-delete, #da3319)
+  );
+  --diffs-bg-deletion-number-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 72%,
+    var(--syntax-diff-delete, #da3319)
+  );
+  --diffs-bg-deletion-emphasis-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 60%,
+    var(--syntax-diff-delete, #da3319)
+  );
+  --diffs-bg-deletion-hover-override: color-mix(
+    in lab,
+    var(--vscode-editor-background, #1e1e1e) 72%,
+    var(--syntax-diff-delete, #da3319)
+  );
+}
diff --git a/packages/kilo-vscode/webview-ui/src/styles/permission-dock.css b/packages/kilo-vscode/webview-ui/src/styles/permission-dock.css
index 98a57c31e4..44aae19ffd 100644
--- a/packages/kilo-vscode/webview-ui/src/styles/permission-dock.css
+++ b/packages/kilo-vscode/webview-ui/src/styles/permission-dock.css
@@ -124,30 +124,8 @@
     border: 1px solid var(--border-weak-base);
     border-radius: 4px;
     overflow: hidden;
-    --diffs-light-bg: var(--vscode-editor-background, #1e1e1e);
-    --diffs-dark-bg: var(--vscode-editor-background, #1e1e1e);
     --syntax-diff-add: #2ea043;
     --syntax-diff-delete: #da3633;
-    --diffs-bg-deletion-override: color-mix(
-      in lab,
-      var(--vscode-editor-background, #1e1e1e) 82%,
-      var(--syntax-diff-delete, #da3633)
-    );
-    --diffs-bg-deletion-number-override: color-mix(
-      in lab,
-      var(--vscode-editor-background, #1e1e1e) 72%,
-      var(--syntax-diff-delete, #da3633)
-    );
-    --diffs-bg-addition-override: color-mix(
-      in lab,
-      var(--vscode-editor-background, #1e1e1e) 82%,
-      var(--syntax-diff-add, #2ea043)
-    );
-    --diffs-bg-addition-number-override: color-mix(
-      in lab,
-      var(--vscode-editor-background, #1e1e1e) 72%,
-      var(--syntax-diff-add, #2ea043)
-    );
   }
 
   [data-slot="permission-diff-header"] {