如何修改SwiftUI中Alert的配色方案？

SwiftUI的原生.alert()组件基于UIKit的UIAlertController实现，它的外观优先级遵循系统全局配色方案，而非SwiftUI视图层级中通过preferredColorScheme设置的应用内自定义配色。因此当手动切换应用内配色时，Alert无法同步更新，导致内部TextField的文字与背景色冲突，影响可读性。

推荐使用自定义SwiftUI Alert组件，完全自主控制外观，确保配色跟随应用内设置同步切换。以下是具体实现步骤：

1. 定义自定义Alert视图 #

创建纯SwiftUI实现的Alert组件，自动继承环境中的配色方案：

struct CustomAlertView: View {
    @Binding var isPresented: Bool
    @Binding var inputText: String
    let title: String
    let message: String
    let onDone: () -> Void
    
    var body: some View {
        ZStack {
            // 半透明背景遮罩，点击可关闭弹窗
            Color.black.opacity(0.5)
                .ignoresSafeArea()
                .onTapGesture {
                    isPresented = false
                }
            
            // Alert主体内容
            VStack(spacing: 16) {
                Text(title)
                    .font(.headline)
                
                Text(message)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                    .multilineTextAlignment(.center)
                
                TextField("Something", text: $inputText)
                    .textFieldStyle(.roundedBorder)
                
                HStack {
                    Button("Cancel") {
                        isPresented = false
                    }
                    .buttonStyle(.bordered)
                    
                    Spacer()
                    
                    Button("Done") {
                        onDone()
                        isPresented = false
                    }
                    .buttonStyle(.borderedProminent)
                }
            }
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(16)
            .padding(.horizontal, 20)
            .transition(.scale.combined(with: .opacity))
            .animation(.easeInOut, value: isPresented)
        }
    }
}

2. 替换原生Alert为自定义组件 #

修改原ContentView，移除.alert()修饰符，改用overlay显示自定义Alert：

import SwiftUI

struct ContentView: View {
    @State private var showAlert = false
    @State private var addSomething: String = ""
    @State private var isSystemMode = false
    @State private var isDarkMode = false

    var body: some View {
        VStack {
            VStack {
                Toggle("Automatic (iOS Settings)", isOn: $isSystemMode)
                if !isSystemMode {
                    Toggle("Dark Mode", isOn: $isDarkMode)
                }
            }
            .padding(.bottom, 20)
            
            Button{
                showAlert = true
            } label: {
                Text("Add something")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.accentColor)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        .padding()
        .preferredColorScheme(isSystemMode ? .none : isDarkMode ? .dark : .light)
        // 使用overlay挂载自定义Alert
        .overlay {
            if showAlert {
                CustomAlertView(
                    isPresented: $showAlert,
                    inputText: $addSomething,
                    title: "Add something",
                    message: "Type in something"
                ) {
                    // 此处添加Done按钮的业务逻辑
                    print("输入内容：\(addSomething)")
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .preferredColorScheme(.light)
            ContentView()
                .preferredColorScheme(.dark)
        }
    }
}

方案优势 #

• 完全跟随应用内preferredColorScheme设置，配色切换无延迟
• 可自由定制Alert的布局、样式、动画效果
• 避免UIKit与SwiftUI交互带来的适配问题

若坚持使用原生Alert，可通过UIKit的UIAppearance全局调整Alert及内部TextField的样式，需创建配色管理类动态更新外观：

class ColorSchemeManager: ObservableObject {
    @Published var isSystemMode = false
    @Published var isDarkMode = false
    
    var colorScheme: ColorScheme? {
        isSystemMode ? nil : (isDarkMode ? .dark : .light)
    }
    
    func updateAlertAppearance() {
        let isDark = isSystemMode ? UITraitCollection.current.userInterfaceStyle == .dark : isDarkMode
        
        // 调整Alert内TextField的文字与背景色
        UITextField.appearance(whenContainedInInstancesOf: [UIAlertController.self]).textColor = isDark ? .white : .black
        UITextField.appearance(whenContainedInInstancesOf: [UIAlertController.self]).backgroundColor = isDark ? UIColor.secondarySystemBackground : UIColor.systemBackground
        
        // 调整Alert按钮颜色
        UIAlertController.appearance().view.tintColor = isDark ? .white : .systemBlue
    }
}

在ContentView中使用该类，并在配色变化时调用updateAlertAppearance()即可。但此方法为全局设置，可能影响其他场景的Alert，需谨慎使用。

内容的提问来源于stack exchange，提问作者s_diaconu