Highlighting the Selected Item Button in a SwiftUI List

If you use a button for list items in SwiftUI, the list item does not highlight when you select it. This is expected behavior for a bordered button. But some apps need to use buttons that look like text to perform actions when selecting the list item. If you have a button that looks like text, you want to highlight the selection so people can easily see the selected item.

How do you highlight the selected item? You must do two things to highlight the selected item. First, you must set the background color for the list row. Second, you must set the foreground color for the list item.

Setting the Background Color

Add a .listRowBackground modifier to the button to set the background color. Use the accent color for the selected item to highlight it and the clear color for the other items to match the standard selection highlighting.

.listRowBackground(self.selection == item ? Color.accentColor : Color(.clear))

1 2	.listRowBackground(self.selection == item ? Color.accentColor : Color(.clear))

Setting the Foreground Color

When you select an item from a SwiftUI list in an app running in light mode, the text color for the item changes from a dark color to a light color. You must set the color based on the current color scheme or else the text of the selected item will be tough to read.

Start by adding an @Environment property to your SwiftUI view that stores the current color scheme: light or dark.

@Environment(\.colorScheme) private var colorScheme

1 2	@Environment(\.colorScheme) private var colorScheme

Next, create computed properties for the item color based on whether or not it’s selected. Use white for the selected item. For unselected items make the text white in dark mode and black in light mode.

var unselectedItemTextColor : Color {
    return (colorScheme == .dark ? Color(.white) : Color(.black))
}
    
var selectedItemTextColor : Color {
    return Color(.white)
}

var unselectedItemTextColor : Color {

return (colorScheme == .dark ? Color(.white) : Color(.black))

}

var selectedItemTextColor : Color {

return Color(.white)

}

Finally add a .foregroundColor modifier to the button. Use the selected item color for the selected item and the unselected item color for the other items.

.foregroundColor(self.selection == item ? selectedItemTextColor : unselectedItemTextColor)

1 2	.foregroundColor(self.selection == item ? selectedItemTextColor : unselectedItemTextColor)