How do I change navigationBarItem color

662 views Asked by At

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?

1

There are 1 answers

0
forrest On BEST ANSWER

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