How to get translucent lists on macOS

Paul Hudson @twostraws June 8th 2021

Updated for Xcode 13.0 beta 2

One subtle but important feature of macOS is the way sidebars are automatically made slightly transparent when a window is active, then made opaque when the window moves to the background – it’s a small hint to the user which window is active, but also lets a little of their background show through, giving them a little context of their environment.

SwiftUI allows us to create these translucent sidebars using the listStyle() modifier on List, passing in SidebarListStyle(), like this:

List(1..<51) {
    Text("\($0)")
}
.listStyle(.sidebar)

Important: If you’re using Xcode 12 you need to use SidebarListStyle() rather than .sidebar.

There’s nothing stopping you from using that with any list, but the clue is in the name: it’s specifically designed for lists that are shown on the side of your main window, as you can see in Xcode’s navigators.

Note: on iOS and iPadOS, SidebarListStyle() does not provide translucent background, but does affect the cell styling.