Skip to content

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

Closed
ariane-emory wants to merge 103 commits into
anomalyco:devfrom
ariane-emory:fix/placeholder-color-5088
Closed

feature: add placeholderText theme color for input placeholders (resolves #5088)#5133
ariane-emory wants to merge 103 commits into
anomalyco:devfrom
ariane-emory:fix/placeholder-color-5088

Conversation

@ariane-emory

Copy link
Copy Markdown
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 anomalyco#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

b0o commented Dec 9, 2025

Copy link
Copy Markdown
Contributor

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

b0o commented Dec 9, 2025

Copy link
Copy Markdown
Contributor

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
Copy Markdown
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
@github-actions

github-actions Bot commented Jan 8, 2026

Copy link
Copy Markdown
Contributor

Hey! Your PR title feature: add placeholderText theme color for input placeholders (resolves #5088) doesn't follow conventional commit format.

Please update it to start with one of:

  • feat: or feat(scope): new feature
  • fix: or fix(scope): bug fix
  • docs: or docs(scope): documentation changes
  • chore: or chore(scope): maintenance tasks
  • refactor: or refactor(scope): code refactoring
  • test: or test(scope): adding or updating tests

Where scope is the package name (e.g., app, desktop, opencode).

See CONTRIBUTING.md for details.

@ariane-emory

Copy link
Copy Markdown
Contributor Author

Doesn't seem to be a whole lot of interest in this one. I'll close it for now, just let me know if you'd like it reopened... I'll keep the branch around for a few more days before deleting it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Theming: Unable to change text input placeholder color

2 participants