Is there a way to change the tint color of a TabView without affecting its subviews?

I am trying to change the highlight color of the tabs in SwiftUI, but when I applied .tint() to the TabView (which is the root view of my app), the entire app seems to be affected. What's more, the views under each seems to randomly switch between the default blue tint and the custom tint I configured.

Is there a way to only change the tab bar's tint color? Thanks!

Answered by Vision Pro Engineer in 798514022

@NSCruiser ,

The only way to change the tab bar's tint color is the use the .tint modifier as you mentioned. You're correct, it will change the entire app. You can override this further down the stack if you'd like. For instance, the following code snippet will set the tint color inside the second tab to be green, as shown in the edit button. The tab bar tint color will be red though.

struct ContentView: View {
    var body: some View {
        TabView {
            Tab("Test", systemImage: "person.crop.circle") {
                Text("Hello, world!")
            }
            
            Tab("List", systemImage: "rectangle") {
                NavigationStack {
                    List {
                        Text("Test1")
                    }
                    .toolbar {
                        EditButton()
                    }
                }
                .tint(.green)
            }
        }
        .tint(.red)
    }
}

If you're seeing bugs with randomly changing colors though, I recommend filing a feedback report for sure.

Thanks!

Sydney

Accepted Answer

@NSCruiser ,

The only way to change the tab bar's tint color is the use the .tint modifier as you mentioned. You're correct, it will change the entire app. You can override this further down the stack if you'd like. For instance, the following code snippet will set the tint color inside the second tab to be green, as shown in the edit button. The tab bar tint color will be red though.

struct ContentView: View {
    var body: some View {
        TabView {
            Tab("Test", systemImage: "person.crop.circle") {
                Text("Hello, world!")
            }
            
            Tab("List", systemImage: "rectangle") {
                NavigationStack {
                    List {
                        Text("Test1")
                    }
                    .toolbar {
                        EditButton()
                    }
                }
                .tint(.green)
            }
        }
        .tint(.red)
    }
}

If you're seeing bugs with randomly changing colors though, I recommend filing a feedback report for sure.

Thanks!

Sydney

@Vision Pro Engineer

Hey Sydney,

Thanks for responding. I tried the advised approach, but discovered that the flickering issue happens on the inner tab's Swift Chart view. Specifically:

  1. On Xcode 15.4, setting the inner tab's tint color to a non-nil color behaves normally. However, setting it to .tint(nil) causes the chart to randomly switch between the default blue tint and the outer TabView's tint (in the above example, red color).

  2. On Xcode 16.0 betas, even setting the inner tab's tint to an explicit color causes flickering. In the above example, the chart would randomly switch between red and green.

I have filed feedback FB14694434.

Is there a way to change the tint color of a TabView without affecting its subviews?
 
 
Q