How to set foregroundColor/fontWeight for a ToolBarItem?

Question

Hello,

I presents a View inside a NavigationView. I use the .toolbar modifier to set a navigation bar items. One of them must be in red as it represents a destructive action.

.toolbar(content: {
  ToolbarItem(placement: .navigationBarLeading) {
     Button { } label: { 
        Text("Delete").foregroundColor(.red) 
     }
  }
}

How can we set a foregroundColor/fontWeight for a Button in a ToolBarItem? I've tried to set a custom ButtonStyle, foregroundColor to the Text, foregroundColor to the Button.

SwiftUI

263

Posted by

bunuelcubosoto

Reply

Add a Comment

Answer 1

Resolved in iOS & iPadOS 15 beta 2

Buttons in toolbar items now respect custom styles or customizations to their labels.

This means that you can customise the appearance of toolbar buttons however you like.

If you wanted the destructive red style button, you can specify a role for the button, like this:

Button(role: .destructive) {
  …
} label: {
  …
}

NOTE: This will only work with iOS 15, macOS 12 and similar.

Posted by

BabyJ

Add a Comment

Answer 2

The attribute that determines the color of a tool bar is it's accentColor (or tint from iOS 15 and on). All you'll have to do is

.toolbar(content: {
  ToolbarItem(placement: .navigationBarLeading) {
     Button { } label: { 
        Text("Delete")
     }
  }
  .accentColor(Color.red)
}

This is for 'selected items' for unselected items you can specify the UITabBar appearance in the view init() method

    init() {
        UITabBar.appearance().backgroundColor = UIColor(Color.blue)
        UITabBar.appearance().unselectedItemTintColor = UIColor(Color.green)
     }

The first one specifies the color of the background of the entire tab bar while the second one just colours the unselected items (non active ones)

Posted by

voidDeveloper

Add a Comment

Answer 3

Hi,

.accentColor is not available on ToolbarItem. I got this error in Xcode:

Value of type 'ToolbarItem<Void, some View>' has no member 'accentColor'

I've tried accentColor modifier on Button but it's not working.

Posted by

bunuelcubosoto

Have you tried the init() method?

—
voidDeveloper

Add a Comment

Answer 4

Resolved in iOS & iPadOS 15 beta 2

Buttons in toolbar items now respect custom styles or customizations to their labels.

This means that you can customise the appearance of toolbar buttons however you like.

If you wanted the destructive red style button, you can specify a role for the button, like this:

Button(role: .destructive) {
  …
} label: {
  …
}

NOTE: This will only work with iOS 15, macOS 12 and similar.

Posted by

BabyJ

Add a Comment

Answer 5

Thank you!

Posted by

bunuelcubosoto

Add a Comment

How to set foregroundColor/fontWeight for a ToolBarItem?

Accepted Reply

Replies