Mateus Neves
Mateus Neves

Reputation: 764

Change default blue color TabBar

When creating a TabBar using TabView and .tabItem, the default colors are: gray when image isn't clicked and blue when it is. Here's a sample code.

struct TabBar: View{
@State var current = 0
var body: some View{
    TabView(selection: $current) {
        
         View0()
            .tag(0)
            .tabItem {
                Image(systemName: "anySystemImageName")
                Text("")
            }
         View3()
            .tag(1)
            .tabItem {
                Image(systemName: "anySystemImageName")
                Text("")
            }
         View2()
            .tag(2)
            .tabItem {
                Image(systemName: "anySystemImageName")
                Text("")
            }
            View3()
            .tag(3)
                .tabItem {
                    Image(systemName: "anySystemImageName")
                    Text("")
                }
  
    }
}
}

How to use a custom color?

Upvotes: 2

Views: 552

Answers (2)

Asperi
Asperi

Reputation: 258541

You can use accent color, like

demo

    TabView(selection: $current) {
        
       // .. other code
  
    }.accentColor(.red)      // << here !!

Upvotes: 2

davidev
davidev

Reputation: 8557

.accentColor is the keyword to change the color

struct ContentView: View{
    @State var current = 0
    var body: some View{
        TabView(selection: $current) {
            Text("View 1")
                .tag(0)
                .tabItem {
                    Image(systemName: "circle")
                    Text("")
                }
                
            Text("View 1")
                .tag(1)
                .tabItem {
                    Image(systemName: "circle")
                    Text("")
                }
            Text("hallo")
                .tag(2)
                .tabItem {
                    Image(systemName: "circle")
                    Text("")
                }
            
            Text("hallo")
                .tag(3)
                .tabItem {
                    Image(systemName: "circle")
                    Text("")
                }
        }.accentColor(.red) //<< here
    }
}

Upvotes: 1

Related Questions