SwiftUI 2.0 - TabView tab bar colors don't respect the current color scheme (dark or light mode)

Question

I'm desperately trying to have my tab bar colors respect the current color scheme. When the app is launched, the Colors are correct. But if I toggle dark and light mode, the colors don't switch back to the correct ones. The light mode colors are always applied. The code is available below the images (simplified for the demo).

Colors are specified in the Assets.xcassets catalog (Any / Light / Dark).

---

import SwiftUI

struct TabBarColorTest: View {
    
    @Environment(\.colorScheme) var colorScheme
    
    init() {
        UITabBar.appearance().isTranslucent = true
        UITabBar.appearance().tintColor = UIColor(named: "TabBarTint")
        UITabBar.appearance().unselectedItemTintColor = UIColor(named: "TabBarUnselected")
        UITabBar.appearance().barTintColor = UIColor(named: "TabBar")
        UITabBar.appearance().backgroundColor = UIColor(named: "TabBar")
    }
    
    var body: some View {
        TabView {
            
            Text("Zero")
                .tabItem {
                    Label("Zero", systemImage: "0.square.fill")
                }
            
            Text("One")
                .tabItem {
                    Label("One", systemImage: "1.square.fill")
                }
        }
        .onChange(of: colorScheme, perform: { value in
            UITabBar.appearance().isTranslucent = true
            UITabBar.appearance().tintColor = UIColor(named: "TabBarTint")
            UITabBar.appearance().unselectedItemTintColor = UIColor(named: "TabBarUnselected")
            UITabBar.appearance().barTintColor = UIColor(named: "TabBar")
            UITabBar.appearance().backgroundColor = UIColor(named: "TabBar")
        })
    }
}

struct TabBarColorTest_Previews: PreviewProvider {
    static var previews: some View {
        TabBarColorTest()
    }
}

Unilingual

should you just solve the issue through Colors in the Assets.xcassets? I mean you want that Colors understand new ColorScheme and make the change, is that the only way you want? – Hunchback

Answer 1

By having the tab item tint color as a SwiftUI modifier and simplifying the initialization of the UIKIt configuration for the tab bar, the issue should be fixed. Tested on Xcode 12.4 with iOS 14 as a minimum target.

struct ContentView: View {

  init() {
    UITabBar.appearance().barTintColor = .systemBackground
    UITabBar.appearance().unselectedItemTintColor = UIColor(named: "TabBarUnselected")
  }
  
  var body: some View {
    TabView {
      
      Text("Zero")
        .tabItem {
          Label("Zero", systemImage: "0.square.fill")
        }
      
      Text("One")
        .tabItem {
          Label("One", systemImage: "1.square.fill")
        }
    }
    .accentColor(Color("TabBarTint"))
  }
}

Grantgranta

Thanks! Removing the UITabBar.appearance().isTranslucent = true, UITabBar.appearance().tintColor = UIColor(named: "TabBarTint") and UITabBar.appearance().backgroundColor = UIColor(.skipperTabBar) fixed the issue! – Unilingual