opencode icon indicating copy to clipboard operation
opencode copied to clipboard

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

Open ariane-emory opened this issue 1 month ago • 4 comments

Resolves #5088.

This PR adds a new, optional placeholderText theme color that allows customizing the color of placeholder text in input fields and textareas. There is no change in beheaviour for users who do not choose to use this new theme property: If the placeholderText property is not used, the existing behaviour of using textMuted is maintained.

Changes:

  • Add placeholderText to ThemeColors type with fallback to textMuted
  • Apply placeholderColor prop to components in dialog-select
  • Apply styled placeholder text to
  • Update JSON schemas to include placeholderText property
  • Maintain backward compatibility - existing themes work unchanged

To use: Simply include a line resembling the following to your theme file:

"placeholderText": "#c00"

ariane-emory avatar Dec 05 '25 20:12 ariane-emory

The main input textarea also needs this treatment:

diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
index 7d5bbb9f0..1b13264df 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
@@ -656,7 +656,7 @@ export function Prompt(props: PromptProps) {
             flexGrow={1}
           >
             <textarea
-              placeholder={props.sessionID ? undefined : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
+              placeholder={props.sessionID ? undefined : t`${fg(theme.placeholderText)(`Ask anything... "${PLACEHOLDERS[store.placeholder]}"`)}`}
               textColor={theme.text}
               focusedTextColor={theme.text}
               minHeight={1}

b0o avatar Dec 09 '25 07:12 b0o

Also, do you think it would be better to add a placeholderColor prop to opentui's textarea and then pass the color directly, like how the other colors are passed? I grepped the opencode codebase and I don't see fg() or the t tagged template function from @opentui/core being used anywhere else.

b0o avatar Dec 09 '25 07:12 b0o

@b0o Addressed your first comment, that part should be good now. I'm going to have to spend a little more time thinking and investigating to come up with an answer I can feel confident in to the question in your latter comment and it's already getting very late here, so I'm going to need to sleep on it and get back to you tomorrow.

ariane-emory avatar Dec 09 '25 08:12 ariane-emory

Corrupted by a bad merge, will fix.

ariane-emory avatar Dec 11 '25 00:12 ariane-emory