SwiftUI TabBar Color

Question

How can one set the tabbar color? Assigning the color black results only with a grey bar for example. This is for SwiftUI. Specify dark mode is not a suitable work around.

    struct ContentView: View {

    @State private var selection = 1



    init() {
        UITabBar.appearance().backgroundColor = UIColor.blue 
        UITabBar.appearance().backgroundImage = UIImage()
        //UITabBar.appearance().isTranslucent = false
        //UITabBar.appearance().shadowImage = UIImage()

    }

    var body: some View {

        TabView {
            ClockView()
                .tabItem {
                    Image("clock")
                    Text("Clock")
            }.tag(0)
            PlanetsNowView()
                .tabItem {
                    Image("clock")
                    Text("Now")
            }.tag(1)
            SettingsView()
                .tabItem {
                    Image("settings")
                    Text("Settings")
            }.tag(2)
        }
        .accentColor(.white)
        .opacity(1)
        //.environment(\.colorScheme, .dark)
    }
}

Answer 1

This is the initializer to create a black tab bar in your SwiftUI View.

import SwiftUI

struct ContentView: View {

  init() {
    setupTabBar()
  }

  var body: some View {
    TabView {
      //Your tab bar items
    }
  }
}

//MARK: - Tab bar view appearance
extension ContentView {
  func setupTabBar() {
    UITabBar.appearance().barTintColor = .black
    UITabBar.appearance().tintColor = .blue
    UITabBar.appearance().layer.borderColor = UIColor.clear.cgColor
    UITabBar.appearance().clipsToBounds = true
  }
}

If you want to change the color depending on the user light/dark mode settings:

• Open 'Assets.xcassets' folder
• Right click on your assets panel
• Choose 'New Color Set'
• Open your attribute inspector panel of the new color
• Select 'Appearances'
• Choose 'Any, Dark'

You will have now two colored squares where you have to choose your light mode color for the first one, and the dark mode one for the second one.

To use it in your code while initializing your tab bar, change the line that defines the barTintColor with the name of your new set of light/dark mode color.

UITabBar.appearance().barTintColor = UIColor(named: "<your color name>")

Answer 2

Add UITabBar.appearance().barTintColor = UIColor.blue in the initialiser.

Not be found in Xcode code assist however.

struct ContentView: View {

    @State private var selection = 1

    init() {
        UITabBar.appearance().barTintColor = UIColor.blue
        UITabBar.appearance().tintColor = .green
    }

    var body: some View {
        TabView (selection:$selection){
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
            }
            .tag(1)
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }.tag(2)
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
            }.tag(3)
        }
        .font(.headline)
        .accentColor(.white)
    }
}