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/component/prompt/index.tsx

@@ -1,4 +1,4 @@
-import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, t, dim, fg, type KeyBinding } from "@opentui/core"
+import { BoxRenderable, TextareaRenderable, MouseEvent, PasteEvent, type KeyBinding } from "@opentui/core"
 import { createEffect, createMemo, type JSX, onMount, createSignal, onCleanup, Show, Switch, Match } from "solid-js"
 import "opentui-spinner/solid"
 import { useLocal } from "@tui/context/local"
@@ -657,6 +657,7 @@ export function Prompt(props: PromptProps) {
           >
             <textarea
               placeholder={props.sessionID ? undefined : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
+
               textColor={theme.text}
               focusedTextColor={theme.text}
               minHeight={1}

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

@@ -47,6 +47,7 @@ type ThemeColors = {
   info: RGBA
   text: RGBA
   textMuted: RGBA
+  placeholderText: RGBA
   selectedListItemText: RGBA
   background: RGBA
   backgroundPanel: RGBA
@@ -124,9 +125,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
   }
 }
@@ -187,7 +189,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)]
       }),
@@ -210,6 +212,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
 
@@ -402,6 +411,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-prompt.tsx

@@ -49,6 +49,7 @@ export function DialogPrompt(props: DialogPromptProps) {
           ref={(val: TextareaRenderable) => (textarea = val)}
           initialValue={props.value}
           placeholder={props.placeholder ?? "Enter text"}
+
           textColor={theme.text}
           focusedTextColor={theme.text}
           cursorColor={theme.text}

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

@@ -196,6 +196,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" },