@@ -28,6 +28,8 @@ export interface SelectableListItem {
2828 label : string
2929 icon ?: string
3030 secondary ?: string
31+ /** If true, the label will be displayed in an accent color */
32+ accent ?: boolean
3133}
3234
3335export interface SelectableListProps {
@@ -136,9 +138,9 @@ export const SelectableList = forwardRef<
136138 const isHovered = idx === hoveredIndex
137139 const isHighlighted = isFocused || isHovered
138140
139- // Use theme.primary background when highlighted, contrast text for readability
140- const backgroundColor = isHighlighted ? theme . primary : 'transparent'
141- const textColor = isHighlighted ? theme . background : theme . muted
141+ // Use subtle highlight that works in both light and dark themes
142+ const backgroundColor = isHighlighted ? theme . surfaceHover : 'transparent'
143+ const textColor = isHighlighted ? theme . foreground : theme . muted
142144 const textAttributes = isHighlighted ? TextAttributes . BOLD : undefined
143145
144146 return (
@@ -165,20 +167,20 @@ export const SelectableList = forwardRef<
165167 } }
166168 >
167169 { item . icon && (
168- < text style = { { fg : isHighlighted ? theme . background : theme . muted } } >
170+ < text style = { { fg : isHighlighted ? theme . foreground : theme . muted } } >
169171 { item . icon }
170172 </ text >
171173 ) }
172174 < text
173175 style = { {
174- fg : textColor ,
175- attributes : textAttributes ,
176+ fg : item . accent && ! isHighlighted ? theme . primary : textColor ,
177+ attributes : item . accent || isHighlighted ? TextAttributes . BOLD : undefined ,
176178 } }
177179 >
178180 { item . label }
179181 </ text >
180182 { item . secondary && (
181- < text style = { { fg : isHighlighted ? theme . surface : theme . muted } } >
183+ < text style = { { fg : theme . muted } } >
182184 { item . secondary }
183185 </ text >
184186 ) }
0 commit comments