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

score 11 · Answer 1 · answered Nov 21 '19 at 18:53

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

I tried this, but I have some issues when the app is going into background, or when the color scheme is updated (dark to light, then light to dark). The dark mode is still using the light color. See my SO post here to have more information: https://stackoverflow.com/questions/66445366/swiftui-2-0-tabview-tab-bar-colors-dont-respect-the-current-color-scheme-dar?noredirect=1#comment117467552_66445366 — alpennec, Mar 18 '21 at 17:20

Yarm · Answer 2 · 2019-10-05T16:48:42.143

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

This approach will break dark mode – Yarm Oct 07 '19 at 08:31 — Yarm, Oct 07 '19 at 08:31

SwiftUI TabBar Color

2 Answers2