Change color of the toggle in SwiftUI

In this tutorial, we will see how to change the toggle switch color in SwiftUI.

We can customize the color of a toggle in SwiftUI to make it look better, and match our app style. We can change the color to make it easier for everyone to use by improving visibility and clarity.

There are many ways to change the color of a toggle.

Using tint() modifier

We can use the tint() modifier to apply a color tint to a view or a control. This modifier will change the color appearance of the view or control and any associated elements such as buttons, toggles, or icons within that view.

So, here we can simply apply the tint() modifier to the Toggle  by passing our preferred color within this modifier to change the color of the toggle switch.

Example

Toggle("Mint", isOn: $isToggled)
    .tint(.mint)

Toggle("Green", isOn: $isToggled)
    .tint(.green)

In the above program, I have applied the tint() modifier to both Toogle and specified mint color for the first toggle and green color for the second toggle.

So, when we enable the toggle switches the first toggle will change to mint color and the second toggle will change to green color.

Output:

Using the toggleStyle() modifier

We can use the toggleStyle() modifier to apply a specific style to the toggle switch.

So, here we can use SwitchToggleStyle() within the toggleStyle() modifier and set its tint to our specific color to change the color of the toggle switch.

Example

Toggle("Toggle Switch", isOn: $isToggled)
    //To change the toggle color
    .toggleStyle(SwitchToggleStyle(tint: .red))

In the above program, I have applied the toggleStyle() modifier to the Toggle and set the tint to .red to change the color of the toggle switch to red.

Output: