feature: add placeholderText theme color for input placeholders (resolves #5088)

packages/console/app/public/theme.json

@@ -46,6 +46,7 @@
         "info": { "$ref": "#/definitions/colorValue" },
         "text": { "$ref": "#/definitions/colorValue" },
         "textMuted": { "$ref": "#/definitions/colorValue" },
+        "placeholderText": { "$ref": "#/definitions/colorValue" },
         "background": { "$ref": "#/definitions/colorValue" },
         "backgroundPanel": { "$ref": "#/definitions/colorValue" },
         "backgroundElement": { "$ref": "#/definitions/colorValue" },

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

@@ -50,6 +50,7 @@ type ThemeColors = {
   info: RGBA
   text: RGBA
   textMuted: RGBA
+  placeholderText: RGBA
   selectedListItemText: RGBA
   background: RGBA
   backgroundPanel: RGBA
@@ -127,9 +128,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" | "placeholderText"> & {
     selectedListItemText?: ColorValue
     backgroundMenu?: ColorValue
+    placeholderText?: ColorValue
     thinkingOpacity?: number
   }
 }
@@ -193,7 +195,7 @@ function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
 
   const resolved = Object.fromEntries(
     Object.entries(theme.theme)
-      .filter(([key]) => key !== "selectedListItemText" && key !== "backgroundMenu" && key !== "thinkingOpacity")
+      .filter(([key]) => key !== "selectedListItemText" && key !== "backgroundMenu" && key !== "placeholderText" && key !== "thinkingOpacity")
       .map(([key, value]) => {
         return [key, resolveColor(value as ColorValue)]
       }),
@@ -216,6 +218,13 @@ function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
     resolved.backgroundMenu = resolved.backgroundElement
   }
 
+  // Handle placeholderText - optional with fallback to textMuted
+  if (theme.theme.placeholderText !== undefined) {
+    resolved.placeholderText = resolveColor(theme.theme.placeholderText)
+  } else {
+    resolved.placeholderText = resolved.textMuted
+  }
+
   // Handle thinkingOpacity - optional with default of 0.6
   const thinkingOpacity = theme.theme.thinkingOpacity ?? 0.6
 
@@ -434,6 +443,7 @@ function generateSystem(colors: TerminalColors, mode: "dark" | "light"): ThemeJs
       // Text colors
       text: fg,
       textMuted,
+      placeholderText: textMuted,
       selectedListItemText: bg,
 
       // Background colors

packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx

@@ -205,6 +205,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
             focusedBackgroundColor={theme.backgroundPanel}
             cursorColor={theme.primary}
             focusedTextColor={theme.textMuted}
+            placeholderColor={theme.placeholderText}
             ref={(r) => {
               input = r
               setTimeout(() => input.focus(), 1)

packages/web/public/theme.json

@@ -46,6 +46,7 @@
         "info": { "$ref": "#/definitions/colorValue" },
         "text": { "$ref": "#/definitions/colorValue" },
         "textMuted": { "$ref": "#/definitions/colorValue" },
+        "placeholderText": { "$ref": "#/definitions/colorValue" },
         "selectedListItemText": { "$ref": "#/definitions/colorValue" },
         "background": { "$ref": "#/definitions/colorValue" },
         "backgroundPanel": { "$ref": "#/definitions/colorValue" },