fix(tui): fix system theme contrast with transparency

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -3,7 +3,19 @@ import { Clipboard } from "@tui/util/clipboard"
 import { Selection } from "@tui/util/selection"
 import { MouseButton, TextAttributes } from "@opentui/core"
 import { RouteProvider, useRoute } from "@tui/context/route"
-import { Switch, Match, createEffect, untrack, ErrorBoundary, createSignal, onMount, batch, Show, on } from "solid-js"
+import {
+  Switch,
+  Match,
+  createEffect,
+  createMemo,
+  untrack,
+  ErrorBoundary,
+  createSignal,
+  onMount,
+  batch,
+  Show,
+  on,
+} from "solid-js"
 import { win32DisableProcessedInput, win32FlushInputBuffer, win32InstallCtrlCGuard } from "./win32"
 import { Flag } from "@/flag/flag"
 import semver from "semver"
@@ -212,11 +224,20 @@ function App() {
   const command = useCommandDialog()
   const sdk = useSDK()
   const toast = useToast()
-  const { theme, mode, setMode } = useTheme()
+  const t = useTheme()
+  const { theme, mode, setMode } = t
   const sync = useSync()
   const exit = useExit()
   const promptRef = usePromptRef()
 
+  // Return the root app background color, applying terminal transparency only for system theme.
+  const appBackground = createMemo(() => theme.transparent ?? theme.background)
+
+  createEffect(() => {
+    // Keep the renderer backdrop in sync so transparent overlays blend against the terminal RGB.
+    renderer.setBackgroundColor(appBackground())
+  })
+
   useKeyboard((evt) => {
     if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
     if (!renderer.getSelection()) return
@@ -782,7 +803,7 @@ function App() {
     <box
       width={dimensions().width}
       height={dimensions().height}
-      backgroundColor={theme.background}
+      backgroundColor={appBackground()}
       onMouseDown={(evt) => {
         if (!Flag.OPENCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
         if (evt.button !== MouseButton.RIGHT) return

packages/opencode/src/cli/cmd/tui/context/theme.tsx

@@ -54,6 +54,8 @@ type ThemeColors = {
   text: RGBA
   textMuted: RGBA
   selectedListItemText: RGBA
+  // Used only in system theme
+  transparent?: RGBA
   background: RGBA
   backgroundPanel: RGBA
   backgroundElement: RGBA
@@ -131,9 +133,10 @@ type ColorValue = HexColor | RefName | Variant | RGBA
 type ThemeJson = {
   $schema?: string
   defs?: Record<string, HexColor | RefName>
-  theme: Omit<Record<keyof ThemeColors, ColorValue>, "selectedListItemText" | "backgroundMenu"> & {
+  theme: Omit<Record<keyof ThemeColors, ColorValue>, "selectedListItemText" | "backgroundMenu" | "transparent"> & {
     selectedListItemText?: ColorValue
     backgroundMenu?: ColorValue
+    transparent?: ColorValue
     thinkingOpacity?: number
   }
 }
@@ -479,8 +482,11 @@ function generateSystem(colors: TerminalColors, mode: "dark" | "light"): ThemeJs
       textMuted,
       selectedListItemText: bg,
 
-      // Background colors - use transparent to respect terminal transparency
-      background: transparent,
+      // Transparent color to respect terminal transparency
+      transparent: transparent,
+
+      // Background colors
+      background: bg,
       backgroundPanel: grays[2],
       backgroundElement: grays[3],
       backgroundMenu: grays[3],