From 5482cc0d09f7c22e15063c75dac223f13b1fa4f9 Mon Sep 17 00:00:00 2001
From: Marius <marius@kilocode.ai>
Date: Mon, 11 May 2026 10:13:36 +0200
Subject: [PATCH] fix(vscode): improve review comment icon contrast (#10130)

---
 .changeset/review-plus-contrast.md                         | 6 ++++++
 packages/kilo-ui/src/components/diff.tsx                   | 7 ++-----
 .../kilo-vscode/webview-ui/agent-manager/agent-manager.css | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/review-plus-contrast.md

diff --git a/.changeset/review-plus-contrast.md b/.changeset/review-plus-contrast.md
new file mode 100644
index 0000000000..49414a2be1
--- /dev/null
+++ b/.changeset/review-plus-contrast.md
@@ -0,0 +1,6 @@
+---
+"kilo-code": patch
+"@kilocode/kilo-ui": patch
+---
+
+Improve review comment plus icon contrast in diff viewers.
diff --git a/packages/kilo-ui/src/components/diff.tsx b/packages/kilo-ui/src/components/diff.tsx
index 43abaaf245..febb70ca81 100644
--- a/packages/kilo-ui/src/components/diff.tsx
+++ b/packages/kilo-ui/src/components/diff.tsx
@@ -256,10 +256,7 @@ export function Diff<T>(props: DiffProps<T>) {
     host.removeAttribute("data-color-scheme")
   }
 
-  // Patch a bug in @pierre/diffs where `grid-template-columns: 100% auto` is set
-  // for `line-info-basic` separators under `@media (pointer: fine)`, causing the
-  // expand button to consume 100% of the gutter width and overlap the separator
-  // content text. We inject into `@layer unsafe` which overrides `@layer base`.
+  // Patch Pierre shadow styles for Kilo-specific layout and contrast tweaks.
   let separatorPatchSheet: CSSStyleSheet | null = null
   const patchSeparatorLayout = () => {
     const root = getRoot()
@@ -267,7 +264,7 @@ export function Diff<T>(props: DiffProps<T>) {
     if (!separatorPatchSheet) {
       separatorPatchSheet = new CSSStyleSheet()
       separatorPatchSheet.replaceSync(
-        `@layer unsafe { @media (pointer: fine) { [data-separator='line-info-basic'][data-expand-index] [data-separator-wrapper] { grid-template-columns: 34px auto; } } }`,
+        `@layer unsafe { @media (pointer: fine) { [data-separator='line-info-basic'][data-expand-index] [data-separator-wrapper] { grid-template-columns: 34px auto; } } [data-utility-button] { background-color: var(--vscode-button-background, var(--button-primary-base, var(--icon-interactive-base))); color: var(--vscode-button-foreground, var(--icon-invert-base, #fff)); } }`,
       )
     }
     if (!root.adoptedStyleSheets.includes(separatorPatchSheet))
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 909688ed72..5181f537af 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
+++ b/packages/kilo-vscode/webview-ui/agent-manager/agent-manager.css
@@ -1991,8 +1991,8 @@ body.am-wt-dragging-active * {
 
 .am-markdown-comment-button:hover,
 .am-markdown-comment-button:focus-visible {
-  color: var(--text-base);
-  background: var(--surface-interactive-base);
+  color: var(--vscode-button-foreground, var(--icon-invert-base, #fff));
+  background: var(--vscode-button-background, var(--button-primary-base, var(--icon-interactive-base)));
 }
 
 .am-markdown-line-number {