How to change a Tab Bar item color in SwiftUI

By default, the selected tab bar item will use the iOS default blue color.

Here is an example of a tab bar.

There are two ways to change a tab bar selected color in SwiftUI.

1. Accent Color
2. Color Scheme

Each method means to be used in different circumstances. Let's learn what the difference is.

Change tab bar item using accentColor

SwiftUI app uses accent color as a color for active tab bar item. If we don't specify one, iOS will use the default blue color you usually see.

To change the selected tab bar item color, you need to change the app's accent color. Here is how you do it.

1. Click on the project Asset Catalog (The default one named Assets.xcassets).
2. Click on the AccentColor color set. This is the color that will be used as the app accent color.

3. Then, you can change this to the color of your choice. As an example, I change this value to .systemPink

After you change the accent color, the tab bar item in your app will use this color as the selected color.

TabView {
    Text("Home")
        .tabItem {
            Label("Home", systemImage: "house")
        }
    Text("Search")
        .tabItem {
            Label("Search", systemImage: "magnifyingglass")
        }
    Text("Notification")
        .tabItem {
            Label("Notification", systemImage: "bell")
        }
    Text("Settings")
        .tabItem {
            Label("Settings", systemImage: "gearshape")
        }
}

Caveat

Before iOS 16, you can use .accentColor color modifier on TabView.

TabView {
    ...
}
.accentColor(Color.pink)

But in iOS 16, .accentColor has been deprecated and no longer work with TabView.

You can easily support sarunw.com by checking out this sponsor.

AI Grammar: Correct grammar, spell check, check punctuation, and parphrase.

Try it for Free

Change tab bar item using Color Scheme

Since iOS 15, a navigation bar and a tab bar will show/hide its background only when there is content behind it.

In iOS 16, we got a new way to modify the tab bar item color when the background is presented.

To modify a tab bar item color when background is presented, we use toolbarColorScheme(_:for:) modifier.

toolbarColorScheme accept two parameters.

1. ColorScheme: The preferred color scheme of the background of the bar.
2. ToolbarPlacement: The bars to update the color scheme. Since we want to change the color for a tab bar, we will set this to .tabBar.

In this example, I apply the light color scheme to each tab bar item with .toolbarColorScheme(.light, for: .tabBar).

TabView {
    Group {
        NavigationStack {
            List {
                Text("Home")
                    .frame(height: 500)
                    .navigationTitle("Home")
            }
        }
        .tabItem {
            Label("Home", systemImage: "house")
        }
        Text("Search")
            .tabItem {
                Label("Search", systemImage: "magnifyingglass")
            }        
        Text("Notification")
            .tabItem {
                Label("Notification", systemImage: "bell")
            }
        Text("Settings")
            .tabItem {
                Label("Settings", systemImage: "gearshape")
            }
        
    }
    .toolbarColorScheme(.light, for: .tabBar)
}

As you can see, in the initial launch, the active tab bar uses the pink color from the accentColor we set in Asset Catalog.

Then after we scroll the content behind the tab bar, the background shows up, and the tab bar item changes its color to match the color scheme that we set in .toolbarColorScheme(.light, for: .tabBar).

This is very helpful when you have a custom tab bar background color that doesn't work well with your accent color.