diff --git a/packages/console/app/public/theme.json b/packages/console/app/public/theme.json index b3e97f7ca89..d0715536c22 100644 --- a/packages/console/app/public/theme.json +++ b/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" }, diff --git a/packages/opencode/src/cli/cmd/tui/context/theme.tsx b/packages/opencode/src/cli/cmd/tui/context/theme.tsx index 5f3a0ad4adf..429c1d88108 100644 --- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx +++ b/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 - theme: Omit, "selectedListItemText" | "backgroundMenu"> & { + theme: Omit, "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 diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx index 4b4c635a529..bc47ce25412 100644 --- a/packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx +++ b/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} diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx index b6c5b5f8b95..d72a980ba29 100644 --- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx +++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx @@ -196,6 +196,7 @@ export function DialogSelect(props: DialogSelectProps) { focusedBackgroundColor={theme.backgroundPanel} cursorColor={theme.primary} focusedTextColor={theme.textMuted} + placeholderColor={theme.placeholderText} ref={(r) => { input = r setTimeout(() => input.focus(), 1) diff --git a/packages/web/public/theme.json b/packages/web/public/theme.json index 7c80776344f..a38c9650934 100644 --- a/packages/web/public/theme.json +++ b/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" },