SOLVED: Coloured menu items

@gavinjerman

May '21

In the example code below I'd like to the word Delete and the trash SF symbol to be red, but no matter what I try it's either black in light mode, or white in dark mode.

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
                    .padding()
            }
            .toolbar {
                ToolbarItem(placement: .automatic) {
                    Menu {
                        Button {
                            print("Delete tapped")
                        } label: {
                            Label("Delete", systemImage: "trash")
                                .foregroundColor(.red) // has no effect
                                .accentColor(.red) // has no effect
                        }
                    } label: {
                        Label("Menu", systemImage: "line.horizontal.3")
                    }
                }
            }
            .navigationTitle("Test")
        }
    }
}

Is it possible to set the colour of menu items? If so, how?

Thanks

Gavin

3

@Greenamberred HWS+

May '21

From what I have read and understood, as of right now this is not possible in SwiftUI and you would have to use UIKit instead.

Here is an article, from Jan 2020, and although it is talking about iOS13, I think that it is still current and relevant now. Context Menus

I did play around with your sample code to try out various things( ButtonStyle, MenuStyle, makeBody, Configuration), until I found the article above.

import SwiftUI

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .foregroundColor(configuration.isPressed ? .blue : .red)
            .background(Color(configuration.isPressed ? .gray : .yellow))
            .opacity(configuration.isPressed ? 1 : 0.75)
            .clipShape(Capsule())
    }
}

struct RedBorderMenuStyle : MenuStyle {
    func makeBody(configuration: Configuration) -> some View {
        Menu(configuration)
            .padding(3)
            .border(Color.red)
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
                    .padding()

                Button {
                    print("Outside Delete tapped")
                } label: {
                    Label("Delete", systemImage: "trash")
                }
                .buttonStyle(MyButtonStyle())

                Button {
                    print("Outside + tapped")
                } label: {
                    Label("Plus", systemImage: "plus")
                }
                .buttonStyle(MyButtonStyle())

            }
            .toolbar {
                ToolbarItem(placement: .automatic) {
                    Menu {
                        Button {
                            print("Menu Delete tapped")
                        } label: {
                            Label("Delete", systemImage: "trash")
                        }
                        .buttonStyle(MyButtonStyle())

                        Button {
                            print("Menu + tapped")
                        } label: {
                            Label("Plus", systemImage: "plus")
                        }
                        .buttonStyle(MyButtonStyle())

                    } label: {
                        Label("Menu", systemImage: "line.horizontal.3")
                    }
                    .menuStyle(RedBorderMenuStyle())

                }
            }
            .navigationTitle("Test")
        }
    }
}

3

@gavinjerman

May '21

Thanks @Greenamberred, hopefully this will be resolved in WWDC 2021.

3

@gitlili

Nov '21

This is now possible in iOS 15 by setting a Button's role.

                Menu {
                    Button(role: .destructive, action: {}) {
                        Label("Delete", systemImage: "trash.fill")
                    }
                    Button(action: {}) {
                        Label("Edit", systemImage: "pencil")
                    }
                } label: {
                    Image(systemName: "ellipsis")
                }

4

@Fravahr

Jan '22

Not working anymore in xcode 13.2 !!!

3

@Greenamberred HWS+

Jan '22

Have you updated to Xcode 13.2.1 (currently the latest version), as the button role are working for me in iOS 15.2.

struct RedBorderMenuStyle : MenuStyle {
    func makeBody(configuration: Configuration) -> some View {
        Menu(configuration)
            .padding(3)
            .border(Color.red)
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
                    .padding()

                Button (role: .destructive) {
                    print("Outside Delete tapped")
                } label: {
                    Label("Delete", systemImage: "trash")
                }

                Button (role: .cancel) {
                    print("Outside Cancel tapped")
                } label: {
                    Label("Cancel", systemImage: "multiply.circle")
                }

            }
            .toolbar {
                ToolbarItem(placement: .automatic) {
                    Menu {
                        Button(role: .destructive) {
                            print("Menu Delete tapped")
                        } label: {
                            Label("Delete", systemImage: "trash")
                        }

                        Button(role: .cancel) {
                            print("Menu Cancel tapped")
                        } label: {
                            Label("Cancel", systemImage: "multiply.circle")
                        }

                    } label: {
                        Label("Menu", systemImage: "line.horizontal.3")
                    }
                    .menuStyle(RedBorderMenuStyle())

                }
            }
            .navigationTitle("Test")
        }
    }
}

3

Archived topic