Skip to content

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

Answered by meowgorithm
koddr asked this question in Q&A
Discussion options

You must be logged in to vote

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)

Replies: 4 comments 1 reply

Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
0 replies
Answer selected by muesli
Comment options

You must be logged in to vote
0 replies
Comment options

You must be logged in to vote
1 reply
@meowgorithm
Comment options

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
question Further information is requested
3 participants
Converted from issue

This discussion was converted from issue #110 on February 01, 2022 09:55.