charmbracelet / bubbles

TUI components for Bubble Tea 🫧
MIT License
5.37k stars 252 forks source link

How to change color of the focused list item (title and description)? #110

Closed koddr closed 2 years ago

koddr commented 2 years ago

Hi,

Can you tell me, how I can change the color of a list item (title and description) that is currently in focus? I can't find it in the source code.

Screenshot 2022-01-30 at 15 28 12

Can you please give me a hint? πŸ˜‰

zmnpl commented 2 years ago

Funny enough I just came here too see if I’m missing something/ someone else has asked this. First issue up top it is πŸ˜† Within the styles which can be set on a list I cannot see one that applies to the list items…

meowgorithm commented 2 years ago

Hi! Rendering (and behavior) for list items is done via the ItemDelegate interface. It can be a little confusing at first, but it allows the list to be very flexible and powerful.

If you just want to alter the default style you could do something like:

import "github.com/charmbracelet/bubbles/list"

// Create a new default delegate
d := list.NewDefaultDelegate()

// Change colors
c := lipgloss.Color("#6f03fc")
d.Styles.SelectedTitle = d.Styles.SelectedTitle.Foreground(c).BorderLeftForeground(c)
d.Styles.SelectedDesc = d.Styles.SelectedTitle.Copy() // reuse the title style here

// Initailize the list model with our delegate
width, height := 80, 40
l := list.New(listItems, d, width, height)

// You can also change the delegate on the fly
l.SetDelegate(d)

This code would replace this line in the list-default example.

For full control over the way list items are rendered you can also define your own ItemDelegate too (example).

zmnpl commented 2 years ago

Ahh alright, thank you! For me this is answered. list/defaultitem.go gives more insight (now that this understood :) ) about how the defaults styles are set up etc.

Cheers!

koddr commented 2 years ago

OMG! Well, of course this is not done in the list style, but in the item style settings! 😞 It might be better to look in the source code, but if there is a way to specify it in the README (for everyone), that would be great.

Thanks, @meowgorithm