How to change selected TabItem background color? SwiftUI

Question

Im running into a weird discrepancy where the preview on Xcode shows the view that I want, but when I deploy it to my iPhone 14 pro (iOS 17) the whole background of the selected tab item becomes highlighted. What's causing the difference between the preview and deployment version? And likewise, how do I remove the background color in the deployed view so it looks like the preview?

Preview, the correct view:

Deployed version with highlighted background

Code: (using AccentColor in Assets for the color)

import SwiftUI

struct PEView: View {
    var body: some View {
        TabView {
           DiaryView()
                .tabItem { Image(systemName: "list.clipboard" ) }
           SearchView()
                .tabItem { Image(systemName: "magnifyingglass" ) }
           SettingsView()
                .tabItem { Image(systemName: "gearshape" ) }
        }
    }
}

#Preview {
    PEView()
}

Answer 1

Appears to be fixed in most recent iOS 17 beta update.

Answer 2

try using .toolbarBackground(.hidden, for: .tabBar) modifier.

struct PEView: View {
    var body: some View {
        TabView {
            DiaryView()
                .tabItem { Image(systemName: "list.clipboard" ) }
            SearchView()
                .tabItem { Image(systemName: "magnifyingglass" ) }
            SettingsView()
                .tabItem { Image(systemName: "gearshape" ) }
        }
        .toolbarBackground(.hidden, for: .tabBar)
    }
}

This could be an iOS 17 only issue as I'm not able to reproduce it on iOS 16. In which case you could also try creating your own cutom bottom tab bar.