When it comes to customizing the SwiftUI Toggle's colors, we don't have a lot of options with modifiers.

And when we use the different ToggleStyles available to us, we don't really see much of a change.

                Toggle("DefaultToggleStyle", isOn: $toggleState)
                    .toggleStyle(DefaultToggleStyle())
                
                Toggle("SwitchToggleStyle", isOn: $toggleState)
                    .toggleStyle(SwitchToggleStyle())

As you can see in the image above, there is no real difference here.

Creating Your Own ToggleStyle: Attempt 1

struct PurpleTextToggleStyle: ToggleStyle { 
    var label = "" 
    func makeBody(configuration: Self.Configuration) -> some View { 
        Toggle(isOn: configuration.$isOn) { 
            Text(label) 
                .foregroundColor(.purple) 
                .fontWeight(.light) 
                .font(.title) 
        }.padding(.horizontal) 
    } 
} 

Creating Your Own ToggleStyle: Attempt 2

struct CheckMarkToggleStyle: ToggleStyle { 
    var label = "" 
    var color = Color.primary 
    
    func makeBody(configuration: Self.Configuration) -> some View { 
        HStack { 
            Text(label) 
            Spacer() 
            Button(action: { configuration.isOn.toggle() } ) 
            { 
                Image(systemName: configuration.isOn 
                    ? "checkmark.square.fill" 
                    : "square.fill") 
                    .foregroundColor(color) 
            } 
        } 
        .font(.title) 
        .padding(.horizontal) 
    } 
} 

This looks great! You can choose any view you want to represent the on/off, true/false states of the toggle. 

But what if you needed something that still looks like a Toggle view AND you want to customize the colors of the actual control?

Creating Your Own ToggleStyle: Attempt 3

struct ColoredToggleStyle: ToggleStyle { 
    var onColor = Color(UIColor.green) 
    var offColor = Color(UIColor.systemGray5) 
    var thumbColor = Color.white 
    
    func makeBody(configuration: Self.Configuration) -> some View { 
        HStack { 
            configuration.label // The text (or view) portion of the Toggle 
            Spacer() 
            RoundedRectangle(cornerRadius: 16, style: .circular) 
                .fill(configuration.isOn ? onColor : offColor) 
                .frame(width: 50, height: 29) 
                .overlay( 
                    Circle() 
                        .fill(thumbColor) 
                        .shadow(radius: 1, x: 0, y: 1) 
                        .padding(1.5) 
                        .offset(x: configuration.isOn ? 10 : -10)) 
                .animation(Animation.easeInOut(duration: 0.2)) 
                .onTapGesture { configuration.isOn.toggle() } 
        } 
        .font(.title) 
        .padding(.horizontal) 
    } 
} 

I originally used a Button view but as you might know, there is an opacity change when tapped. So I added the onTapGesture modifier to toggle the isOn property.

I still feel there is a better way because you'll notice when you tap down on the Toggle, you see the thumb stretch horizontally a little bit. The code above does not stretch it out.

Summary

Free SwiftUI Picture Book

Screenshots for every code example? Yes! Get your FREE SwiftUI picture book here.