opencode icon indicating copy to clipboard operation
opencode copied to clipboard

[Enhancement] Add configurable syntax tokens for XML/HTML tag highlighting (#6130)

Open CasualDeveloper opened this issue 3 weeks ago • 5 comments

Problem

XML/HTML tags are styled using hardcoded color mappings in getSyntaxRules():

{ scope: ["tag"], style: { foreground: theme.error } },
{ scope: ["tag.attribute"], style: { foreground: theme.syntaxKeyword } },
{ scope: ["tag.delimiter"], style: { foreground: theme.syntaxOperator } },

This means custom themes cannot independently control tag colors—they inherit from unrelated tokens (error, syntaxKeyword, syntaxOperator).

Proposed Solution

Add three new optional theme tokens:

  • syntaxTag - for tag names (<div>, <span>)
  • syntaxAttribute - for attributes (class=, href=)
  • syntaxTagDelimiter - for delimiters (<, >, />)

These would be optional with backward-compatible fallbacks to the current hardcoded values.

Files to Modify

  • packages/opencode/src/cli/cmd/tui/context/theme.tsx
  • packages/web/public/theme.json (schema)
  • packages/opencode/src/cli/cmd/tui/context/theme/opencode.json

CasualDeveloper avatar Dec 24 '25 21:12 CasualDeveloper

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

  • #5088: Theming: Unable to change text input placeholder color (same pattern of missing dedicated theme tokens)
  • #5286: Separate theming of sidebar background color (extends theme customization requests)
  • #815: Hot reload or add keymap to reload the theme (would complement theme token additions)
  • #2750: Improve UI customization / accessibility (broader theming/customization request)

These issues share the common theme of requesting more granular control over theming and syntax highlighting in OpenCode. Feel free to ignore if your specific case requires something different!

github-actions[bot] avatar Dec 24 '25 21:12 github-actions[bot]

Reviewed the related issues flagged by the bot - this is not a duplicate.

  • #5088 - Same pattern (missing theme token) but for placeholder text, not syntax highlighting
  • #5286 - Requests separate sidebar background token, different scope
  • #815 - About hot-reloading themes, unrelated
  • #2750 - Broader accessibility/UI customization, different scope

This issue specifically addresses syntax highlighting tokens for XML/HTML tags.

CasualDeveloper avatar Dec 24 '25 21:12 CasualDeveloper

I have a working implementation ready - typechecks pass.

CasualDeveloper avatar Dec 24 '25 21:12 CasualDeveloper

Re-committed with valid GPG signature. PR ready: #6130

Will continue rebasing on top of release tags as they're set.

CasualDeveloper avatar Dec 24 '25 22:12 CasualDeveloper

Will continue rebasing on top of release tags as they're set.

CasualDeveloper avatar Dec 30 '25 19:12 CasualDeveloper