SwiftUI - Change TabBar Icon Color

Question

I can't change the TabBar Color in SwiftUI. I try it with the TabbedView, with the Image/Text and with a Stack. Nothing works for me.

using .foregroundColor doesn't work.

TabbedView(selection: $selection){
 TextView()
  .tag(0)
  .tabItemLabel(
 VStack {
  Image("Calendar")
   .foregroundColor(.red)
  Text("Appointments")
   .foregroundColor(.red)
  }
 ).foregroundColor(.red)
}.foregroundColor(.red)

score 45 · Answer 1 · answered Apr 05 '20 at 13:08

Solution 1

Use renderingMode(.template)

struct MainView: View {

    var body: some View {
       TabView {
            LoginView().tabItem {
                VStack {
                    Text("Login")
                    Image("login").renderingMode(.template)
                }
            }

            HomeView().tabItem {
                VStack {
                    Text("Home")
                    Image("home").renderingMode(.template)
                }
            }
        }.accentColor(.orange)
    }
}

Solution 2

Make tabItem type

enum TabViewItemType: String {
    case login  = "login"
    case home   = "home"
    case search = "search"

    var image: Image {
        switch self {
        case .login:  return Image("login")
        case .home:   return Image("home")
        case .search: return Image("search")
        }
    }

    var text: Text {
        Text(self.rawValue)
    }
}

struct MainView: View {

    var body: some View {
        TabView {
            LoginView()
                .tabItem { TabViewItem(type: .login) }

            HomeView()
                .tabItem { TabViewItem(type: .home) }

            SearchView()
                .tabItem { TabViewItem(type: .search) }

        }.accentColor(.orange)
    }
}

struct TabViewItem: View {

    var type: TabViewItemType

    var body: some View {
        VStack {
            type.image.renderingMode(.template)
            type.text

        }
    }
}

Great answer! Could even be a bit shorter: `var image: Image { return Image(self.rawValue) }` — koen, Aug 01 '20 at 07:42
We could further improve by setting all of the assets for tab item to use the `template` rendingMode from the asset catalogue just to tidy things up a bit more. — Owen, Jul 11 '21 at 12:33
THANK YOU. .accentColor was the elusive modifier. All other resources claimed .foregroundColor, and it wasn't working for me. — Mathieson, Jan 02 '22 at 20:49

score 27 · Answer 2 · answered Aug 20 '19 at 01:22

Use accentColor:

        TabView(selection: $selection) {
            NavigationView {
                HomeView()
            }.navigationBarTitle("Home")
                .tabItem {
                    VStack {
                        if selection == 0 {
                            Image(systemName: "house.fill")
                        } else {
                            Image(systemName: "house")
                        }
                        Text("Home")
                    }
                }
            .tag(0)
            NavigationView {
                SettingsView()
            }.navigationBarTitle("Settings")
                .tabItem {
                    VStack {
                        Image(systemName: "gear")
                        Text("Settings")
                    }
                }
                .tag(1)
        }.accentColor(.purple)

It's work but this mean entire app now accentColor is purple — tuandapen, Feb 08 '20 at 05:18
@tuandapen just use .accentColor(.none) on the views (HomeView, SettingsView) and it won't propagate — Arnaud, Aug 10 '21 at 20:06

score 11 · Answer 3 · answered Oct 08 '19 at 14:08

You can use UITabBar.appearance() to do some customisation until Apple comes with a more standard way of updating SwiftUI TabView

Change TabItem (text + icon) color

init() {
  UITabBar.appearance().unselectedItemTintColor = UIColor.white
}

Change TabView background color

init() {
  UITabBar.appearance().backgroundColor = UIColor.red
  UITabBar.appearance().backgroundImage = UIImage()
}

Overall code looks like this -

struct ContentView: View {

   init() {
       // UITabBar customization
   }

  var body: some View {
     TabView(selection: $selection) {
         FirstTabView()
              .tabItem {
                  VStack {
                     Image(systemName: "map")
                     Text("Near Me")
                  }
              }
     }
  }

}

Use .accentColor modifier for changing color of selected tabItem

After trying many options this worked for me..

score 9 · Answer 4 · answered Aug 31 '20 at 13:33

9

I think you can just use the accentColor of TabView，it works for me :]

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

answered Aug 31 '20 at 13:33

MichaelMao

528
6
15

score 4 · Answer 5 · answered Dec 16 '22 at 08:52

4

On iOS16 .accentColor(Color) is deprecated. You can use .tint(Color) on the TabView instead.

 TabView {
        Text("First Tab")
            .tabItem {
                Image(systemName: "1.circle")
                Text("First")
            }
 }.tint(Color.yellow)

answered Dec 16 '22 at 08:52

user20791887

51
2

Do you happen to know how to change the not-selected color? Is there a proper (not going back to UIKit appearance for example) way in iOS 16 for this? – meaning-matters Jan 07 '23 at 06:46

score 2 · Answer 6 · answered Oct 08 '19 at 12:55

I made an extension for Image which initialises with a UIImage with a tint color:

extension Image {
    init(_ named: String, tintColor: UIColor) {
        let uiImage = UIImage(named: named) ?? UIImage()
        let tintedImage = uiImage.withTintColor(tintColor,
                                                renderingMode: .alwaysTemplate)
        self = Image(uiImage: tintedImage)
    }
}

score 1 · Answer 7 · answered Jul 19 '19 at 10:27

Currently SwiftUI does not have a direct method for that.

We've to use the UIKit method for that unless SwiftUI introduces any new solution.

try below code:

struct ContentView: View {

    init() {
        UITabBar.appearance().backgroundColor = UIColor.purple
    }

    var body: some View {
        return TabbedView {
            Text("This is tab 1")
                .tag(0)
                .tabItem {
                    Text("tab1")
            }
            Text("This is tab 2")
                .tag(1)
                .tabItem {
                    Text("tab1")
            }
            Text("This is tab 3")
                .tag(2)
                .tabItem {
                    Text("tab1")
            }
        }
    }
}

score 1 · Answer 8 · answered Jul 11 '21 at 11:54

1

In case you need to set up accent color for entire app with SwiftUI interface, you just need to define AccentColor in Assets.xcassets file like in the picture below. TabBar icons will get it without any additional code.

answered Jul 11 '21 at 11:54

Eduard Streltsov

1,754
20
19

SwiftUI - Change TabBar Icon Color

8 Answers8