feature: optional selectedListItemText element in themes and luminance-based fallback to solve 4369 (#4572)

Co-authored-by: knanao <nao.7ken@gmail.com>
Co-authored-by: knanao <k@knanao.com>

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

@@ -33,7 +33,7 @@ import { createStore, produce } from "solid-js/store"
 import { Global } from "@/global"
 import { Filesystem } from "@/util/filesystem"
 
-type Theme = {
+type ThemeColors = {
   primary: RGBA
   secondary: RGBA
   accent: RGBA
@@ -43,9 +43,11 @@ type Theme = {
   info: RGBA
   text: RGBA
   textMuted: RGBA
+  selectedListItemText: RGBA
   background: RGBA
   backgroundPanel: RGBA
   backgroundElement: RGBA
+  backgroundMenu: RGBA
   border: RGBA
   borderActive: RGBA
   borderSubtle: RGBA
@@ -86,6 +88,27 @@ type Theme = {
   syntaxPunctuation: RGBA
 }
 
+type Theme = ThemeColors & {
+  _hasSelectedListItemText: boolean
+}
+
+export function selectedForeground(theme: Theme): RGBA {
+  // If theme explicitly defines selectedListItemText, use it
+  if (theme._hasSelectedListItemText) {
+    return theme.selectedListItemText
+  }
+
+  // For transparent backgrounds, calculate contrast based on primary color
+  if (theme.background.a === 0) {
+    const { r, g, b } = theme.primary
+    const luminance = 0.299 * r + 0.587 * g + 0.114 * b
+    return luminance > 0.5 ? RGBA.fromInts(0, 0, 0) : RGBA.fromInts(255, 255, 255)
+  }
+
+  // Fall back to background color
+  return theme.background
+}
+
 type HexColor = `#${string}`
 type RefName = string
 type Variant = {
@@ -96,7 +119,10 @@ type ColorValue = HexColor | RefName | Variant | RGBA
 type ThemeJson = {
   $schema?: string
   defs?: Record<string, HexColor | RefName>
-  theme: Record<keyof Theme, ColorValue>
+  theme: Omit<Record<keyof ThemeColors, ColorValue>, "selectedListItemText" | "backgroundMenu"> & {
+    selectedListItemText?: ColorValue
+    backgroundMenu?: ColorValue
+  }
 }
 
 export const DEFAULT_THEMES: Record<string, ThemeJson> = {
@@ -137,19 +163,44 @@ function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
 
       if (defs[c]) {
         return resolveColor(defs[c])
-      } else if (theme.theme[c as keyof Theme]) {
-        return resolveColor(theme.theme[c as keyof Theme])
+      } else if (theme.theme[c as keyof ThemeColors] !== undefined) {
+        return resolveColor(theme.theme[c as keyof ThemeColors]!)
       } else {
         throw new Error(`Color reference "${c}" not found in defs or theme`)
       }
     }
     return resolveColor(c[mode])
   }
-  return Object.fromEntries(
-    Object.entries(theme.theme).map(([key, value]) => {
-      return [key, resolveColor(value)]
-    }),
-  ) as Theme
+
+  const resolved = Object.fromEntries(
+    Object.entries(theme.theme)
+      .filter(([key]) => key !== "selectedListItemText" && key !== "backgroundMenu")
+      .map(([key, value]) => {
+        return [key, resolveColor(value)]
+      }),
+  ) as Partial<ThemeColors>
+
+  // Handle selectedListItemText separately since it's optional
+  const hasSelectedListItemText = theme.theme.selectedListItemText !== undefined
+  if (hasSelectedListItemText) {
+    resolved.selectedListItemText = resolveColor(theme.theme.selectedListItemText!)
+  } else {
+    // Backward compatibility: if selectedListItemText is not defined, use background color
+    // This preserves the current behavior for all existing themes
+    resolved.selectedListItemText = resolved.background
+  }
+
+  // Handle backgroundMenu - optional with fallback to backgroundElement
+  if (theme.theme.backgroundMenu !== undefined) {
+    resolved.backgroundMenu = resolveColor(theme.theme.backgroundMenu)
+  } else {
+    resolved.backgroundMenu = resolved.backgroundElement
+  }
+
+  return {
+    ...resolved,
+    _hasSelectedListItemText: hasSelectedListItemText,
+  } as Theme
 }
 
 export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
@@ -288,11 +339,13 @@ function generateSystem(colors: TerminalColors, mode: "dark" | "light"): ThemeJs
       // Text colors
       text: fg,
       textMuted,
+      selectedListItemText: bg,
 
       // Background colors
       background: bg,
       backgroundPanel: grays[2],
       backgroundElement: grays[3],
+      backgroundMenu: grays[3],
 
       // Border colors
       borderSubtle: grays[6],