tui: fix system theme diff highlighting

- Generate distinct red/green backgrounds for added/removed lines in system theme
- Use bright ANSI colors for diff highlights to improve visibility
- Fix ANSI palette indexing to handle null entries safely
- Add color tinting to create proper diff backgrounds while respecting terminal colors

Resolves issue where system theme showed no red/green diff highlighting

1 files changed, 35 insertions, 15 deletions

diff --git a/packages/opencode/src/cli/cmd/tui/context/theme.tsx b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
index 26701f953..95346e3ac 100644
--- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx
+++ b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
@@ -407,25 +407,45 @@ async function getCustomThemes() {
 function generateSystem(colors: TerminalColors, mode: "dark" | "light"): ThemeJson {
   const bg = RGBA.fromHex(colors.defaultBackground ?? colors.palette[0]!)
   const fg = RGBA.fromHex(colors.defaultForeground ?? colors.palette[7]!)
-  const palette = colors.palette.filter((x) => x !== null).map((x) => RGBA.fromHex(x))
   const isDark = mode == "dark"
 
+  const col = (i: number) => {
+    const value = colors.palette[i]
+    if (value) return RGBA.fromHex(value)
+    return ansiToRgba(i)
+  }
+
+  const tint = (base: RGBA, overlay: RGBA, alpha: number) => {
+    const r = base.r + (overlay.r - base.r) * alpha
+    const g = base.g + (overlay.g - base.g) * alpha
+    const b = base.b + (overlay.b - base.b) * alpha
+    return RGBA.fromInts(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255))
+  }
+
   // Generate gray scale based on terminal background
   const grays = generateGrayScale(bg, isDark)
   const textMuted = generateMutedTextColor(bg, isDark)
 
   // ANSI color references
   const ansiColors = {
-    black: palette[0],
-    red: palette[1],
-    green: palette[2],
-    yellow: palette[3],
-    blue: palette[4],
-    magenta: palette[5],
-    cyan: palette[6],
-    white: palette[7],
+    black: col(0),
+    red: col(1),
+    green: col(2),
+    yellow: col(3),
+    blue: col(4),
+    magenta: col(5),
+    cyan: col(6),
+    white: col(7),
+    redBright: col(9),
+    greenBright: col(10),
   }
 
+  const diffAlpha = isDark ? 0.22 : 0.14
+  const diffAddedBg = tint(bg, ansiColors.green, diffAlpha)
+  const diffRemovedBg = tint(bg, ansiColors.red, diffAlpha)
+  const diffAddedLineNumberBg = tint(grays[3], ansiColors.green, diffAlpha)
+  const diffRemovedLineNumberBg = tint(grays[3], ansiColors.red, diffAlpha)
+
   return {
     theme: {
       // Primary colors using ANSI
@@ -460,14 +480,14 @@ function generateSystem(colors: TerminalColors, mode: "dark" | "light"): ThemeJs
       diffRemoved: ansiColors.red,
       diffContext: grays[7],
       diffHunkHeader: grays[7],
-      diffHighlightAdded: ansiColors.green,
-      diffHighlightRemoved: ansiColors.red,
-      diffAddedBg: grays[2],
-      diffRemovedBg: grays[2],
+      diffHighlightAdded: ansiColors.greenBright,
+      diffHighlightRemoved: ansiColors.redBright,
+      diffAddedBg,
+      diffRemovedBg,
       diffContextBg: grays[1],
       diffLineNumber: grays[6],
-      diffAddedLineNumberBg: grays[3],
-      diffRemovedLineNumberBg: grays[3],
+      diffAddedLineNumberBg,
+      diffRemovedLineNumberBg,
 
       // Markdown colors
       markdownText: fg,