swiftswiftui

SwiftUI: How can I change the Color of Alert Button and NavigationLink back button?


How can I change the Color from the Button in a Alert and the back Button from NavigationLink? To set .accentColor(.init("someColor")) after the Text from the Alert Button doesn't work. To set .accentColor(.init("someColor")) after navigationLink does not work too. What can I do?

The Alert Button: enter image description here

The Back Button from NavigationLink: enter image description here

struct ContentView: View {
    
    @State var showSheet = false
    @State var alertShouldBeShown = !UserDefaults.standard.bool(forKey: "£Start")

    var body: some View {
        Button(action:  {
            self.showSheet.toggle()
        }) {
            Text("click me")
            //.accentColor(colorScheme == .dark ? Image("") : Image("Info-Icon"))
        }.sheet(isPresented: $showSheet) {
            SheetView(showSheet: self.$showSheet)
        }
        .alert(isPresented: $alertShouldBeShown, content: {

            Alert(title: Text("Headline"),
                message: Text("Text"),
                dismissButton: Alert.Button.default(
                    Text("Ok"), action: {
                    UserDefaults.standard.set(true, forKey: "Start")
                    }
                )
            )
        })
    }
}

struct SheetView: View {
    @Binding var showSheet: Bool
    var body: some View {
        NavigationView {
            DetailView()
                .navigationBarTitle(Text("Headline"), displayMode: .inline)
                .navigationBarItems(trailing: Button(action: {
                    self.showSheet = false
                }) {
                    Text("Done")
                        .bold()
            })
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

struct DetailView: View {
    var body: some View {
        List {
            HStack {
                NavigationLink(destination: DetailViewOne()) {
                                    Text("View 1")
                }
            }
            HStack {
                NavigationLink(destination: DetailViewTwo()) {
                                    Text("View 2")
                }
            }
        }
    }
}

struct DetailViewOne: View {
    var body: some View {
        Text("1")
    }
}

struct DetailViewTwo: View {
    var body: some View {
        Text("2")
    }
}

Solution

  • You can change the NavigationBar accent color by using accentColor but you need to apply it to the SheetView (the root view of a given environment):

    SheetView(showSheet: self.$showSheet)
        .accentColor(.red)
    

    Unfortunately SwiftUI doesn't allow much of Alert customisation so far.

    However, as Alert is built on top of UIKit components (UIAlertController) this also means you can change the appearance of UIView when contained in UIAlertController.

    You can put this code in your @main App init or in the SceneDelegate:

    UIView.appearance(whenContainedInInstancesOf: [UIAlertController.self]).tintColor = .red