SwiftUI中preferredColorScheme对ColorPicker弹窗无效果问题求助

问题说明 #

我开发的App支持用户切换主题：可设为自适应模式，也可强制切换为日间/夜间模式，不受设备系统主题影响。但发现ColorPicker弹出的选择面板（popover）完全忽略设置的preferredColorScheme，只跟随设备系统的主题，而其他组件（比如示例中的列表）都能正常响应自定义主题。

示例代码如下：

import SwiftUI

struct ColorPickerTest: View {
    
    @Environment(\.colorScheme) var colorScheme
    @State var setColorScheme: ColorScheme? = nil
    
    @State var selectedColor = Color.green
    
    var body: some View {
        ZStack {
            selectedColor.ignoresSafeArea()
            VStack {
                List {
                    ForEach(1..<6) { n in
                        Text("item \(n)")
                    }
                }
                .frame(height: 500)
                .cornerRadius(30)
                
                ColorPicker("Color", selection: $selectedColor)
                    .fixedSize().padding()
                    .background(colorScheme == .dark ? .blue : selectedColor)
                    .cornerRadius(30).padding()
                
                HStack {
                    Text("Theme:")
                    Text("Adaptive").onTapGesture { setColorScheme = nil }
                    Text("Night").onTapGesture { setColorScheme = .dark }
                    Text("Day").onTapGesture { setColorScheme = .light }
                }
            }
        }
        .preferredColorScheme(setColorScheme)
    }
}

#Preview {
    ColorPickerTest()
}

原因分析 #

SwiftUI的ColorPicker底层封装的是UIKit的UIColorPickerViewController，这个系统级视图控制器的外观默认绑定设备的系统主题设置，而非SwiftUI视图层级中的preferredColorScheme。因为它的popover是在独立的窗口层级展示，不会自动继承当前视图的环境配置。

解决方案 #

方案一：强制同步UIKit的界面风格 #

通过监听自定义主题的变化，直接修改应用的全局界面风格，让UIColorPickerViewController跟随这个设置。

修改原代码，添加对setColorScheme的监听：

struct ColorPickerTest: View {
    
    @Environment(\.colorScheme) var colorScheme
    @State var setColorScheme: ColorScheme? = nil
    
    @State var selectedColor = Color.green
    
    var body: some View {
        ZStack {
            // 原有内容不变
            selectedColor.ignoresSafeArea()
            VStack {
                List {
                    ForEach(1..<6) { n in
                        Text("item \(n)")
                    }
                }
                .frame(height: 500)
                .cornerRadius(30)
                
                ColorPicker("Color", selection: $selectedColor)
                    .fixedSize().padding()
                    .background(colorScheme == .dark ? .blue : selectedColor)
                    .cornerRadius(30).padding()
                
                HStack {
                    Text("Theme:")
                    Text("Adaptive").onTapGesture { setColorScheme = nil }
                    Text("Night").onTapGesture { setColorScheme = .dark }
                    Text("Day").onTapGesture { setColorScheme = .light }
                }
            }
        }
        .preferredColorScheme(setColorScheme)
        .onChange(of: setColorScheme) { newScheme in
            // 转换为UIKit对应的界面风格
            let uiStyle: UIUserInterfaceStyle
            switch newScheme {
            case .dark:
                uiStyle = .dark
            case .light:
                uiStyle = .light
            case nil:
                uiStyle = .unspecified
            }
            // 给所有窗口设置强制风格
            UIApplication.shared.connectedScenes
                .compactMap { $0 as? UIWindowScene }
                .forEach { scene in
                    scene.windows.forEach { window in
                        window.overrideUserInterfaceStyle = uiStyle
                    }
                }
        }
    }
}

注意：这种方法会全局覆盖应用的界面风格，适合整个App都需要跟随自定义主题的场景。如果只是部分页面需要自定义主题，可能会影响其他页面的表现。

方案二：自定义SwiftUI版ColorPicker Popover #

完全用SwiftUI实现颜色选择器的popover内容，这样就能完全受preferredColorScheme的控制。

示例代码：

struct CustomColorPicker: View {
    @Binding var selection: Color
    @Environment(\.colorScheme) var colorScheme
    @Binding var isPresented: Bool
    
    let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .purple, .pink, .gray, .white, .black]
    
    var body: some View {
        VStack {
            Text("选择颜色")
                .font(.headline)
                .padding()
            
            LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 5)) {
                ForEach(colors, id: \.self) { color in
                    Button {
                        selection = color
                        isPresented = false
                    } label: {
                        Circle()
                            .fill(color)
                            .frame(width: 50, height: 50)
                            .overlay(
                                Circle()
                                    .stroke(colorScheme == .dark ? .white : .black, lineWidth: selection == color ? 3 : 0)
                            )
                    }
                }
            }
            .padding()
            
            Button("取消") {
                isPresented = false
            }
            .padding(.bottom)
        }
        .background(colorScheme == .dark ? Color(.systemBackground) : .white)
        .cornerRadius(20)
        .frame(maxWidth: 300)
    }
}

// 使用自定义ColorPicker的视图
struct ColorPickerTest: View {
    
    @Environment(\.colorScheme) var colorScheme
    @State var setColorScheme: ColorScheme? = nil
    
    @State var selectedColor = Color.green
    @State var showCustomPicker = false
    
    var body: some View {
        ZStack {
            selectedColor.ignoresSafeArea()
            VStack {
                List {
                    ForEach(1..<6) { n in
                        Text("item \(n)")
                    }
                }
                .frame(height: 500)
                .cornerRadius(30)
                
                // 替换系统ColorPicker为自定义按钮+popover
                Button {
                    showCustomPicker = true
                } label: {
                    HStack {
                        Text("Color")
                        Circle()
                            .fill(selectedColor)
                            .frame(width: 20, height: 20)
                    }
                    .fixedSize().padding()
                    .background(colorScheme == .dark ? .blue : selectedColor)
                    .foregroundColor(colorScheme == .dark ? .white : .black)
                    .cornerRadius(30)
                }
                .popover(isPresented: $showCustomPicker) {
                    CustomColorPicker(selection: $selectedColor, isPresented: $showCustomPicker)
                }
                
                HStack {
                    Text("Theme:")
                    Text("Adaptive").onTapGesture { setColorScheme = nil }
                    Text("Night").onTapGesture { setColorScheme = .dark }
                    Text("Day").onTapGesture { setColorScheme = .light }
                }
            }
        }
        .preferredColorScheme(setColorScheme)
    }
}

这种方法的优势是完全可控，popover的外观会严格跟随SwiftUI的环境主题，缺点是需要自己实现颜色选择的逻辑（如果需要更复杂的颜色拾取功能，比如滑块调色，还需要扩展自定义视图）。

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