Reputation: 764
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
Reputation: 258541
You can use accent color, like
TabView(selection: $current) {
// .. other code
}.accentColor(.red) // << here !!
Upvotes: 2
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