Change alert message font color, background color in SwiftUI

The straightforward and simple answer is a big NO. For now, SwiftUI does not allow you to change any of the color schemes in the alert.

Theoretically, you can do that by customizing UIAlertController which I do not recommend at all.

Still, if you are desperate to get your own custom alert you can check the previous tutorial on Create Custom alert or popup view in SwiftUI.

In this tutorial, I will show you a simple code that will create a custom alert for you. It is so simple that you won’t like this at all but you can do customization to it as much as you want.

import SwiftUI

struct ContentView: View {
    @State private var alertStatus = false
    var body: some View {
        Button("Show alert") {
            alertStatus = true
        }
        .alert("Important notice", isPresented: $alertStatus) {
            Button("Cancel", role: .cancel) { }
            Button("Delete", role: .destructive) { }
        } message: {
            Text("You are terminated!")
                .background(Color.yellow)
        }
    }
}

I have tried the above code.

.background(Color.yellow)This will not work at all. You can’t change anything in this alert message.

So I tried creating this with ZStack.

Take a look at this:

import SwiftUI

struct ContentView: View {
    @State private var isAlertPresented = false

    var body: some View {
        ZStack {
            VStack {
                Button("Show Custom Alert") {
                    isAlertPresented.toggle()
                }
                .padding()

                Spacer()
            }

            if isAlertPresented {
                CustomAlertView(isPresented: $isAlertPresented)
            }
        }
    }
}

struct CustomAlertView: View {
    @Binding var isPresented: Bool

    var body: some View {
        ZStack {
            Color.black.opacity(0.4).edgesIgnoringSafeArea(.all)

            VStack {
                Text("Custom Alert")
                    .font(.title)
                    .foregroundColor(.black)
                    .padding()

                Text("This is a custom alert!")
                    .font(.body)
                    .foregroundColor(.black)
                    .padding()

                Button("OK") {
                    isPresented.toggle()
                }
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
            }
            .background(Color.white)
            .cornerRadius(20)
            .padding()
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Output:

You can change the color of the message just using this below modifier.

.foregroundColor(.red)

It is just an idea of how to do this.

Now it’s in your hands how you would like to customize the alert message.

import SwiftUI

struct ContentView: View {
    @State private var isAlertPresented = false

    var body: some View {
        ZStack {
            VStack {
                Button("Show Custom Alert") {
                    isAlertPresented.toggle()
                }
                .padding()

                Spacer()
            }

            if isAlertPresented {
                CustomAlertView(isPresented: $isAlertPresented)
            }
        }
    }
}

struct CustomAlertView: View {
    @Binding var isPresented: Bool

    var body: some View {
        ZStack {
            Color.black.opacity(0.6).edgesIgnoringSafeArea(.all)

            VStack {
                VStack {
                    Text("Custom Alert")
                        .font(.title)
                        .foregroundColor(.black)

                    Divider()
                        .background(Color.black)
                }
                .background(Color.white)
                .cornerRadius(15)
                .padding(.horizontal, 20)

                Text("This is a custom alert.")
                    .font(.body)
                    .foregroundColor(.black)
                    .padding(.top, 10)
                    .padding(.horizontal, 20)

                Button("OK") {
                    isPresented.toggle()
                }
                .padding(.vertical, 10)
                .frame(maxWidth: .infinity)
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
                .padding(.top, 10)
                .padding(.bottom, 10)
                .padding(.horizontal, 120)
            }
            .background(Color.white)
            .cornerRadius(15)
            .padding(.horizontal, 20)
        }
    }
}

Output: