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 a17b1353379..a2dbdf78ae7 100644 --- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx +++ b/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 - theme: Omit, "selectedListItemText" | "backgroundMenu"> & { + theme: Omit, "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 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 1e764d66bba..277939eb031 100644 --- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx +++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx @@ -205,6 +205,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" },