SwiftUI - Change TabBar Icon Color - swift

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

Answer 4

I think you can just use the accentColor of TabView，it works for me :]
TabView {
...
}.accentColor(Color.red)

Answer 5

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)
}
}

Answer 6

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)

Answer 7

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")
}
}
}
}

Answer 8

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.