How to change TabView background color with SwiftUI?

Default TabView comes in light grey background color. the accentColor modifier works ok for changing the icon selected color, but I can not get the background color to change.


Modifiers I've tried: .background(Color.white)


This should work, but it doesn't. Could someone point me to the right direction?


Thank you!

  • to change active item color you only have to add TabView().accentColor(you_Color_here)

    to change inactive item color .onAppear{           UITabBar.appearance().unselectedItemTintColor = UIColor(theme.colors.secondary)         }

Add a Comment

Replies

struct TabViewColor: View {

init() {

UITabBar.appearance().backgroundColor = UIColor.red

}

var body: some View {

TabView {

.......

}

}

}



Hope this helps!

Post not yet marked as solved Up vote reply of fa65 Down vote reply of fa65
I could not get this to work,
It sets an odd red tint, regardless of colour

So after digging around on the modifiers.
I found simply adding the modifier.

Code Block
.onAppear() {
                        UITabBar.appearance().barTintColor = .black
                           }
Works

Using onAppear did not work for me. I split the difference to get it to work for me, using

Code Block
   init() {
      UITabBar.appearance().barTintColor = UIColor(Color(colorExtraLight)) // custom color.
   }

Also, with backgroundColor it appeared to be about 50% opaque, but barTintColor appeared solid.

xcode 12.4/iOS 14.0

Hey everyone,

There's a first class SwiftUI method for this now: https://developer.apple.com/documentation/swiftui/tabview/toolbarbackground(_:for:)

You can modify the TabView like so:

TabView {
    ContentView()
}
.toolbarBackground(.red, for: .tabBar)

Hope that helps!

@timisenman I've tried the same but didn't work unfortunately.

What worked for me actually is to use the .toolbarBackground(_:for) modifier on ContentView() instead of TabView{}

Is there any recent update on this?

The correct way to set this is as follows:

struct ContentView: View {
    
    var body: some View {
        TabView {
            Group {
                Rectangle().fill(.red)
                    .tabItem {
                        Text("a")
                    }
                Rectangle().fill(.green)
                    .tabItem {
                        Text("b")
                    }
            }
            .toolbarBackground(.blue, for: .tabBar)
            .toolbarBackground(.visible, for: .tabBar)
        }
    }
}

You need to set the toolbarBackground to be visible as it is hidden by default

( @neesus , mentioning you se you see the update to this post)

This will work for iOS 16 and above. NOTE the Group container around your tab items and how these modifiers are on it, not the TabView.

    var body: some View {
        TabView {
            Group {
                FavoritesView()
                    .tabItem {
                        Label("Favorites", systemImage: "heart")
                    }

                IslandsView()
                    .tabItem {
                        Label("Rivers", systemImage: "water.waves")
                    }
            }
            .toolbarBackground(.blue, for: .tabBar)
            .toolbarBackground(.visible, for: .tabBar)
            .toolbarColorScheme(.dark, for: .tabBar)
        }

    }
}