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)

Answer 1

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

        }
    }
}

Answer 2

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)

Answer 3

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..