SwiftUI中如何正确设置Toggle的着色颜色？实际显示偏深

为什么颜色显示不一致？ #

SwiftUI的Switch类型Toggle组件，会对通过tint设置的颜色自动应用系统内置的颜色调整逻辑——包括降低饱和度、调整亮度等，目的是让开关组件在不同状态（开启/关闭、暗色模式、高亮交互）下保持视觉一致性和可读性，这就导致你设置的原始颜色被系统处理后变深或出现偏差。

如何让Toggle显示你设置的原始颜色？ #

最可靠的方式是自定义Toggle样式，完全接管开关的绘制逻辑，绕过系统的颜色处理：

// 自定义开关样式
struct CustomSwitchStyle: ToggleStyle {
    let activeColor: Color
    
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            // 保留原标签
            configuration.label
            
            Spacer()
            
            // 绘制开关背景
            RoundedRectangle(cornerRadius: 16)
                .frame(width: 51, height: 31)
                .foregroundColor(configuration.isOn ? activeColor : .gray.opacity(0.3))
            
            // 绘制开关滑块
            Circle()
                .foregroundColor(.white)
                .frame(width: 27, height: 27)
                .offset(x: configuration.isOn ? 12 : -12)
                .shadow(color: .black.opacity(0.1), radius: 1, x: 0, y: 1)
        }
        .onTapGesture {
            withAnimation(.easeInOut(duration: 0.2)) {
                configuration.isOn.toggle()
            }
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var toggle = false
    
    var body: some View {
        HStack{
            VStack {
                // 原始颜色矩形
                Rectangle()
                    .frame(width: 300, height: 20)
                    .foregroundColor(Color(red: 60/255, green: 255/255, blue: 68/255))
                
                // 使用自定义样式的Toggle
                Toggle("Toggle", isOn: $toggle)
                    .toggleStyle(CustomSwitchStyle(activeColor: Color(red: 60/255, green: 255/255, blue: 68/255)))
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding()
    }
}

这种方式完全由你控制开关的颜色，不会被系统修改。如果只是临时需求，也可以尝试用UIColor直接创建颜色（部分场景下能避免系统调整），但自定义样式是最稳定的方案：

// 用UIColor创建的颜色，部分场景下可绕过SwiftUI的颜色调整
extension Color {
    static let customGreen = Color(UIColor(red: 60/255, green: 255/255, blue: 68/255, alpha: 1))
}

// 使用
Toggle("Toggle", isOn: $toggle)
    .toggleStyle(.switch)
    .tint(.customGreen)

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