Skip to content

Conversation

@ariane-emory
Copy link
Contributor

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 <textarea> components in dialog-prompt and prompt
  • 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"

Fixes sst#5088 by adding a new optional \`placeholderText\` theme color that allows
customizing the color of placeholder text in input fields and textareas.

Changes:
- Add \`placeholderText\` to ThemeColors type with fallback to \`textMuted\`
- Apply \`placeholderColor\` prop to <input> components in dialog-select
- Apply styled placeholder text to <textarea> components in dialog-prompt and prompt
- Update JSON schemas to include \`placeholderText\` property
- Maintain backward compatibility - existing themes work unchanged

The new field follows ariane-emory's suggestion and provides a minimal,
focused solution for theming placeholder text.
@ariane-emory ariane-emory changed the title feat: Add placeholderText theme color for input placeholders (resolves #5088) feat: add placeholderText theme color for input placeholders (resolves #5088) Dec 5, 2025
@ariane-emory ariane-emory changed the title feat: add placeholderText theme color for input placeholders (resolves #5088) feature: add placeholderText theme color for input placeholders (resolves #5088) Dec 5, 2025
@ariane-emory ariane-emory deleted the fix/placeholder-color-5088 branch December 6, 2025 05:47
@ariane-emory ariane-emory restored the fix/placeholder-color-5088 branch December 6, 2025 06:37
@ariane-emory ariane-emory reopened this Dec 6, 2025
@b0o
Copy link

b0o commented Dec 9, 2025

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
Copy link

b0o commented Dec 9, 2025

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.

@ariane-emory
Copy link
Contributor Author

@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.

- Update TextareaOptions interface to include optional placeholderColor field
- Add _placeholderColor private field and getter/setter methods to TextareaRenderable
- Modify constructor to initialize placeholderColor with fallback to #666666
- Update applyPlaceholder method to use placeholderColor instead of hardcoded fg(#666666)
- Update OpenCode components to use new placeholderColor prop instead of t/fg template functions
- Remove unused t, fg imports from dialog-prompt and prompt components

This enables consistent placeholder color theming across all input components using the same prop-based API pattern
- Remove t, fg imports from DialogPrompt and Prompt components
- Change textarea components to use placeholderColor prop instead of t/fg template functions
- This leverages the new placeholderColor prop added to opentui Textarea component
- Provides consistent API pattern matching Input component's placeholderColor usage
@ariane-emory ariane-emory marked this pull request as draft December 9, 2025 22:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Theming: Unable to change text input placeholder color

2 participants