From 2e6c3580df6fd54b0115f541d48e35f706b06ac9 Mon Sep 17 00:00:00 2001
From: Miguel Solorio <miguelsolorio@google.com>
Date: Thu, 14 Aug 2025 23:18:39 -0700
Subject: Stylize diff line numbers & characters (#6269)

---
 .../src/ui/components/messages/DiffRenderer.tsx    | 27 +++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

(limited to 'packages/cli/src/ui/components/messages/DiffRenderer.tsx')

diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
index 7f130b3f..fda5f1d4 100644
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
@@ -10,6 +10,7 @@ import { Colors } from '../../colors.js';
 import crypto from 'crypto';
 import { colorizeCode, colorizeLine } from '../../utils/CodeColorizer.js';
 import { MaxSizedBox } from '../shared/MaxSizedBox.js';
+import { theme } from '../../semantic-colors.js';
 
 interface DiffLine {
   type: 'add' | 'del' | 'context' | 'hunk' | 'other';
@@ -287,7 +288,16 @@ const renderDiffContent = (
 
         acc.push(
           <Box key={lineKey} flexDirection="row">
-            <Text color={Colors.Gray}>
+            <Text
+              color={theme.text.secondary}
+              backgroundColor={
+                line.type === 'add'
+                  ? theme.background.diff.added
+                  : line.type === 'del'
+                    ? theme.background.diff.removed
+                    : undefined
+              }
+            >
               {gutterNumStr.padStart(gutterWidth)}{' '}
             </Text>
             {line.type === 'context' ? (
@@ -300,11 +310,22 @@ const renderDiffContent = (
             ) : (
               <Text
                 backgroundColor={
-                  line.type === 'add' ? Colors.DiffAdded : Colors.DiffRemoved
+                  line.type === 'add'
+                    ? theme.background.diff.added
+                    : theme.background.diff.removed
                 }
                 wrap="wrap"
               >
-                {prefixSymbol} {colorizeLine(displayContent, language)}
+                <Text
+                  color={
+                    line.type === 'add'
+                      ? theme.status.success
+                      : theme.status.error
+                  }
+                >
+                  {prefixSymbol}
+                </Text>{' '}
+                {colorizeLine(displayContent, language)}
               </Text>
             )}
           </Box>,
-- 
cgit v1.2.3

