swiftuiuicolornavigationbaritems

How do I change navigationBarItem color


I want to be able to set custom colors for the NavBar and the navigationBarItems in SwiftUI. Here is the code for the navigationBarItems:

.navigationBarItems(leading: EditButton(), trailing: Button(action: {
     self.showingAddScreen.toggle()
 }) {
     Image(systemName: "plus")
 })
 .sheet(isPresented: $showingAddScreen) {
     NavigationView {
         AddTaskView().environment(\.managedObjectContext, self.moc)
     }
}

I created an extension with the following code which works well on the NavigationBar background color but it does not change the color of the navigationBarItems - they have the default button blue color.

extension UINavigationController {
    override open func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let standardAppearance = UINavigationBarAppearance()
        standardAppearance.backgroundColor = UIColor(red: 66/255, green: 116/255, blue: 147/255, alpha: 1.0)

        let scrollEdgeAppearance = UINavigationBarAppearance()
        scrollEdgeAppearance.backgroundColor = UIColor(red: 66/255, green: 116/255, blue: 147/255, alpha: 1.0)

        let compactAppearance = UINavigationBarAppearance()
        compactAppearance.backgroundColor = UIColor(red: 66/255, green: 116/255, blue: 147/255, alpha: 1.0)

        navigationBar.standardAppearance = standardAppearance
        navigationBar.scrollEdgeAppearance = scrollEdgeAppearance
        navigationBar.compactAppearance = compactAppearance

        navigationBar.tintColor = UIColor.white
    }
}

What is the correct way to change the navigationBarItems color?


Solution

  • I discovered that while a universal setting might be handy, that you can actually style the .foregroundColor for each button:

      .navigationBarItems(leading: EditButton().foregroundColor(Color.white), trailing: Button(action: {
                        self.showingAddScreen.toggle()
                    }) {
                        Image(systemName: "plus")
                            .foregroundColor(Color.white)
                    })
                    .sheet(isPresented: $showingAddScreen) {
                        NavigationView {
                            AddTaskView().environment(\.managedObjectContext, self.moc)
                        }
                }