How to set foregroundColor/fontWeight for a ToolBarItem?

Question

bunuelcubosoto OP

Created Sep ’21

Replies 4

Boosts 0

Participants 3

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.

Answered by BabyJ in 687328022

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.

Boost

Answer 1

voidDeveloper OP

Sep ’21

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)

0

Answer 2

bunuelcubosoto OP

Sep ’21

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.

0

Answer 3

BabyJ OP

Sep ’21

Accepted Answer

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.

0

Answer 4

bunuelcubosoto OP

Sep ’21

Thank you!

0