opencode icon indicating copy to clipboard operation
opencode copied to clipboard

Theming: Unable to change text input placeholder color

Open b0o opened this issue 1 month ago • 2 comments

Description

It seems none of the theme keys apply to the placeholder text in input fields:

Image

If I create a custom theme where each color is set to #00FF00, the placeholder text is the only element that is unchanged:

Image

Same with the command palette:

Image
All-Green Theme
{
  "$schema": "https://opencode.ai/theme.json",
  "defs": {},
  "theme": {
    "primary": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "secondary": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "accent": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "error": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "warning": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "success": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "info": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "text": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "textMuted": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "background": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "backgroundPanel": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "backgroundElement": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "border": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "borderActive": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "borderSubtle": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffAdded": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffRemoved": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffContext": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffHunkHeader": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffHighlightAdded": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffHighlightRemoved": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffAddedBg": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffRemovedBg": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffContextBg": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffLineNumber": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffAddedLineNumberBg": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "diffRemovedLineNumberBg": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownText": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownHeading": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownLink": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownLinkText": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownCode": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownBlockQuote": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownEmph": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownStrong": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownHorizontalRule": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownListItem": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownListEnumeration": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownImage": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownImageText": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "markdownCodeBlock": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxComment": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxKeyword": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxFunction": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxVariable": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxString": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxNumber": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxType": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxOperator": {
      "dark": "#00ff00",
      "light": "#00ff00"
    },
    "syntaxPunctuation": {
      "dark": "#00ff00",
      "light": "#00ff00"
    }
  }
}

OpenCode version

1.0.133

Steps to reproduce

Add the example theme I provided, load opencode, select that theme.

Screenshot and/or share link

No response

Operating System

Arch Linux

Terminal

Ghostty

b0o avatar Dec 05 '25 00:12 b0o

This issue might be a duplicate of existing issues. Please check:

  • #4461: Input text is black on black (similar issue with input text styling and visibility)
  • #4928: Diffs invisible on light mode (related to theme colors not applying to certain UI elements)
  • #4551: Code Formatting for light themes does not correctly (related issue with text styling in light themes)

Feel free to ignore if none of these address your specific case.

github-actions[bot] avatar Dec 05 '25 00:12 github-actions[bot]

Proposal: how about we add placeholderText as a new, optional theme field to control the colour of placeholder text, falling back to the existing textMuted property if the placeholderText field is not present in the theme?

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