Customizing Selection Highlight Color for NavigationLink in NavigationSplitView

Hello everyone,

I am currently developing a macOS application using SwiftUI and have a NavigationSplitView in use. Within this view, I have a sidebar that contains several menu items, each represented by a NavigationLink. These links direct the user to corresponding content views when selected.

Here's a snippet of the relevant code:

var body: some View {
    List {
        Text("App Title")
            .font(.system(size: 18, weight: .medium))
            .foregroundColor(dataManager.getThemeColor())
            .padding(.bottom, 10)

        ForEach(menuItems, id: \.name) { item in
            NavigationLink {
                item.destination()
            } label: {
                Label(item.name, systemImage: item.iconName)
                    .padding(.vertical, 3)
            }
            .accentColor(dataManager.getThemeColor())
        }
    }
}

In this setup, I've been attempting to change the selection highlight color of the NavigationLink items within my sidebar. My aim is to customize this color to match the specific theme of my app. However, it seems SwiftUI restricts this customization, defaulting to the system's accent color. It's important to note that the .accentColor modifier seems to only affect the color of the icons, not the highlight color of the selected item.

Interestingly, I've observed that the Feedback Assistant app by Apple (which also seems to be using a NavigationSplitView) doesn't follow this default behavior. In this app, the sidebar NavigationLinks' highlight color does not match the system's accent color, but instead, it appears to be a custom shade of purple.

So, I'm wondering if there's a way to implement similar customization in my application. Despite various attempts, such as trying to change the accent color of individual NavigationLinks (as seen in the above code), I haven't been successful.

I would greatly appreciate any insights or potential solutions to this issue. Specifically, understanding how Apple achieved this customization in the Feedback Assistant app would be really valuable.

Thank you for your time and assistance!

Answered by BabyJ in 757465022

Just a note: the accentColor(_:) modifier is deprecated and the AccentColor in the Assets catalogue or the tint(_:) modifier should be used instead.


First of all, make sure you have your System Settings > Appearance > Accent Colour set to "Multicolour" to allow different colours for apps' accent colours.

By default, sidebar list items take on the app's accent colour (defined in the Assets catalogue). This is where your app's accent colour should go anyway. If it is defined in code, like you are doing, you could use the tint(_:) modifier instead, but I don't know if this method works.

Accepted Answer

Just a note: the accentColor(_:) modifier is deprecated and the AccentColor in the Assets catalogue or the tint(_:) modifier should be used instead.


First of all, make sure you have your System Settings > Appearance > Accent Colour set to "Multicolour" to allow different colours for apps' accent colours.

By default, sidebar list items take on the app's accent colour (defined in the Assets catalogue). This is where your app's accent colour should go anyway. If it is defined in code, like you are doing, you could use the tint(_:) modifier instead, but I don't know if this method works.

Customizing Selection Highlight Color for NavigationLink in NavigationSplitView
 
 
Q