[PR #4572] feature: optional selectedListItemText element in themes and luminance-based fallback to solve 4369 #11024

Closed
opened 2026-02-16 18:15:48 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/anomalyco/opencode/pull/4572

State: closed
Merged: Yes


Resolves #4369.

This PR adds an optional 'selectedListItemText' theme colour field for better transparency support (i.e, when background colour = "none"). This provides a means by which users may avoid issue #4369.

Adds a new optional selectedListItemTextcolour property to the theme system that specifies the text color when displayed on a primary background (e.g., selected list items, active buttons).

If selectedListItemText is not present, a contrasting color (black or white) based on the luminance of theme is used (thanks to a branch from knanao I merged in).

Previously, selected items would use the background colour as text colour, making text invisible when background was transparent.

Changes:

  • Add selectedListItemText to Theme type and ThemeJson schema
  • Implement automatic fallback: if selectedListItemText is not defined in a theme,
    it defaults to the background colour, preserving current behaviour
  • Update all UI components that display text on primary backgrounds to
    use theme.selectedListItemText instead of theme.background
  • Add selectedListItemText to JSON schema as optional property

Backward compatibility:

  • All existing themes (built-in and custom) continue to work unchanged
  • No theme files require modification
  • Visual appearance remains identical for existing themes
  • Users can opt-in by adding primaryText to their custom themes

Components updated:

  • dialog-select.tsx: Selected list items (4 locations)
  • dialog-confirm.tsx: Active confirmation buttons (1 location)
  • dialog-help.tsx: OK button (1 location)
  • dialog-alert.tsx: OK button (1 location)
  • autocomplete.tsx: Selected autocomplete items (2 locations)

Example of usage in a custom theme:

{
  "background": "none",
  "primary": "#fab283",
  "selectedListItemText": "#0a0a0a"
}

Screenshot

Compare to the screenshot in issue #4369.

This screenshot shows the same theme but with "selectedListItemText": "#000", added, note that the text of the selected list item is now legible.

Screenshot 2025-11-21 at 2 21 28 AM
**Original Pull Request:** https://github.com/anomalyco/opencode/pull/4572 **State:** closed **Merged:** Yes --- Resolves #4369. This PR adds an optional 'selectedListItemText' theme colour field for better transparency support (i.e, when background colour = "none"). This provides a means by which users may avoid issue #4369. Adds a new optional `selectedListItemText`colour property to the theme system that specifies the text color when displayed on a `primary` background (e.g., selected list items, active buttons). If selectedListItemText is not present, a contrasting color (black or white) based on the luminance of theme is used (thanks to a branch from knanao I merged in). Previously, selected items would use the background colour as text colour, making text invisible when background was transparent. #### Changes: - Add selectedListItemText to Theme type and ThemeJson schema - Implement automatic fallback: if selectedListItemText is not defined in a theme, it defaults to the background colour, preserving current behaviour - Update all UI components that display text on primary backgrounds to use theme.selectedListItemText instead of theme.background - Add selectedListItemText to JSON schema as optional property #### Backward compatibility: - All existing themes (built-in and custom) continue to work unchanged - No theme files require modification - Visual appearance remains identical for existing themes - Users can opt-in by adding primaryText to their custom themes #### Components updated: - dialog-select.tsx: Selected list items (4 locations) - dialog-confirm.tsx: Active confirmation buttons (1 location) - dialog-help.tsx: OK button (1 location) - dialog-alert.tsx: OK button (1 location) - autocomplete.tsx: Selected autocomplete items (2 locations) Example of usage in a custom theme: ``` { "background": "none", "primary": "#fab283", "selectedListItemText": "#0a0a0a" } ``` #### Screenshot Compare to the screenshot in issue #4369. This screenshot shows the same theme but with `"selectedListItemText": "#000",` added, note that the text of the selected list item is now legible. <img width="961" height="603" alt="Screenshot 2025-11-21 at 2 21 28 AM" src="https://github.com/user-attachments/assets/03f02a4c-8669-4e0f-b874-648ac516df86" />
yindo added the pull-request label 2026-02-16 18:15:48 -05:00
yindo closed this issue 2026-02-16 18:15:48 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#11024