Stylize diff line numbers & characters (#6269)

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>,