SwiftUI：如何为特定页面单独设置preferredColorScheme

问题根源：在App层级设置的preferredColorScheme优先级高于子视图的同属性设置，所以直接在子页面添加.preferredColorScheme(.light)不会生效。

下面提供两种可靠的解决方法：

方法一：使用环境变量实现局部覆盖（推荐） #

这种方法不会修改全局主题状态，仅对目标页面生效，是最优雅的方案。

1. 定义自定义环境键，用于传递局部配色覆盖值：

private struct OverrideColorSchemeKey: EnvironmentKey {
    static let defaultValue: ColorScheme? = nil
}

extension EnvironmentValues {
    var overrideColorScheme: ColorScheme? {
        get { self[OverrideColorSchemeKey.self] }
        set { self[OverrideColorSchemeKey.self] = newValue }
    }
}

2. 创建一个主题包装视图，自动根据全局设置或局部覆盖值应用配色：

struct ThemedContainer<Content: View>: View {
    @Environment(\.overrideColorScheme) private var localOverride
    @EnvironmentObject private var settings: Settings
    
    let content: Content
    
    var body: some View {
        content
            .preferredColorScheme(localOverride ?? settings.themeMode.colorScheme)
    }
}

3. 修改App入口，用主题包装视图包裹根视图：

@main
struct MyApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    @StateObject private var settings = Settings.shared

    var body: some Scene {
        WindowGroup {
            GeometryReader { _ in
                ThemedContainer {
                    ApplicationView()
                }
                .environmentObject(settings)
            }
        }
    }
}

4. 在需要覆盖配色的页面，设置局部环境变量：

struct TargetPage: View {
    var body: some View {
        VStack {
            // 页面内容
        }
        .environment(\.overrideColorScheme, .light)
    }
}

方法二：临时修改全局主题（适合模态页面） #

如果目标页面是模态弹出的，可以临时修改全局主题，离开时恢复原设置：

struct ModalOverridePage: View {
    @EnvironmentObject private var settings: Settings
    @State private var originalScheme: ColorScheme?
    
    var body: some View {
        VStack {
            // 页面内容
        }
        .onAppear {
            // 保存原主题
            originalScheme = settings.themeMode.colorScheme
            // 强制设置当前页面为浅色
            settings.themeMode.colorScheme = .light
        }
        .onDisappear {
            // 恢复原主题
            if let original = originalScheme {
                settings.themeMode.colorScheme = original
            }
        }
    }
}

注意：这种方法会临时改变全局主题状态，如果用户在该页面操作全局主题切换，会被覆盖，因此仅推荐在独立模态页面使用。

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