Set Toggle color in SwiftUI

Question

I've implemented a toggle after following Apple's tutorial on user input. Currently, it looks like this:

This is the code that produces this UI:

NavigationView {
    List {
        Toggle(isOn: $showFavoritesOnly) {
            Text("Show Favorites only")
        }
    }
}

Now, I'd like the Toggle's on-color to be blue instead of green.
I tried:

Toggle(isOn: $showFavoritesOnly) {
    Text("Show Favorites only")
}
.accentColor(.blue)

.foregroundColor(.blue)

.background(Color.blue)

None of these worked and I wasn't able to find any other modifiers, such as tintColor.

How do I change the color of a Toggle?

Based on the documentation, it seems like `.accentColor` should change the `Toggle`'s color. Maybe file a bug report with Apple and see what they say? — RPatel99, Jun 06 '19 at 17:24
https://developer.apple.com/documentation/swiftui/toggle. It seems like the closest option to UIKit’s tintColor in SwiftUI, which is why I said that it seems like it should change Toggle’s color. If you file a bug report about it then hopefully whoever responds will either confirm that it is a bug or that there is another SwiftUI way to do it. — RPatel99, Jun 06 '19 at 19:58
I think this is a bug. It should change with `.accentColor`. I filed **FB6158727** and I'll let you know if Apple says anything about it. :) — Clifton Labrum, Jun 16 '19 at 00:34
@KarenKarapetyan Apple tells me this was fixed in Xcode 11 beta 4, but I haven't confirmed that yet. — Clifton Labrum, Dec 11 '19 at 20:59
I am using 11.3 and I have not been able to get ```.accentColor``` to work. — Spencer Connaughton, Dec 29 '19 at 02:19

Mark Moeykens · Accepted Answer · 2021-11-23T17:58:40.510

SwiftUI 3.0

Using tint

A new modifier was introduced that can also change the Toggle color:

Toggle(isOn: $isToggleOn) {
    Text("Red")
    Image(systemName: "paintpalette")
}
.tint(.red)

Toggle(isOn: $isToggleOn) {
    Text("Orange")
    Image(systemName: "paintpalette")
}
.tint(.orange)

SwiftUI 2.0

Using SwitchToggleStyle

You can now set a tint color for the on position only in SwiftUI 2.0:

Toggle(isOn: $isToggleOn) {
    Text("Red")
    Image(systemName: "paintpalette")
}
.toggleStyle(SwitchToggleStyle(tint: Color.red))

Toggle(isOn: $isToggleOn) {
    Text("Orange")
    Image(systemName: "paintpalette")
}
.toggleStyle(SwitchToggleStyle(tint: Color.orange))

SwiftUI 1.0

Using ToggleStyle

I created a new ToggleStyle to change the three colors of the Toggle (on color, off color, and the thumb).

struct ColoredToggleStyle: ToggleStyle {
    var label = ""
    var onColor = Color(UIColor.green)
    var offColor = Color(UIColor.systemGray5)
    var thumbColor = Color.white
    
    func makeBody(configuration: Self.Configuration) -> some View {
        HStack {
            Text(label)
            Spacer()
            Button(action: { configuration.isOn.toggle() } )
            {
                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.1))
            }
        }
        .font(.title)
        .padding(.horizontal)
    }
}

Examples of Use

Toggle("", isOn: $toggleState)
    .toggleStyle(
        ColoredToggleStyle(label: "My Colored Toggle",
                           onColor: .green,
                           offColor: .red,
                           thumbColor: Color(UIColor.systemTeal)))

Toggle("", isOn: $toggleState2)
    .toggleStyle(
        ColoredToggleStyle(label: "My Colored Toggle",
                           onColor: .purple))

From the SwiftUI Book

This is really nice work and seems to be the only viable solution at this point. Thanks! — codewithfeeling, Oct 28 '19 at 17:31
You're doing enough work here that it makes sense to just create a unique toggle rather than instantiating their busted one with a style modifier. Usage would be cleaner — Adama, Mar 11 '20 at 16:52
Very good!!! I wonder why they got rid of the radio button in IOS. It was very useful. Thanks — araferna, May 15 '20 at 01:21
In SwiftUI 2.0 (or whatever we're calling it) you can simply use the .toggleStyle modifier (see example below taken from WWDC). — Ever Uribe, Jun 23 '20 at 18:15
@MarkMoeykens Absolutely fantastic work. I Don't know if there is any changes in `ToggleStyleConfiguration` but in HStack, instead of using Text(label), you can directly use `configuration.label`. — Saurabh Prajapati, Sep 11 '20 at 12:59
The SwiftUI 1.0 method is still useful if you want to customize the "off" state of the toggle. I haven't found a property for that on `Toggle()` yet. — Clifton Labrum, Feb 02 '21 at 01:13
@CliftonLabrum, yes and also it useful for thumb color customization. — kelin, Jun 01 '21 at 21:20

score 18 · Answer 2 · answered Aug 19 '19 at 18:36

18

Just use UIAppearance APIs:

UISwitch.appearance().onTintColor = UIColor.blue

It'll of course by default change the appearance of all the instances of UISwitch, as per UIAppearance documentation.

NOTE: Tested as of Xcode 11 beta 5.

answered Aug 19 '19 at 18:36

Karol Kulesza

909
8
10

13

This appears to be broken for iOS 14/Xcode 12 Beta 3. – harrisg Aug 03 '20 at 15:18
It appears to work at first, but then if you turn off and back on, color is reset to default – Iker Solozabal Dec 02 '21 at 16:12

score 13 · Answer 3 · answered Jun 23 '20 at 18:22

SwiftUI 2.0 (Post WWDC-2020)

Using the new SwiftUI enhancements you can use the .toggleStyle modifier.

// Switch tinting

Toggle(isOn: $order.notifyWhenReady) {
    Text("Send notification when ready")
}
.toggleStyle(SwitchToggleStyle(tint: .accentColor))

Note this only works for iOS14/iPadOS14/macOS11 and above.

score 9 · Answer 4 · answered Jun 06 '19 at 15:25

9

I haven't found a way to directly change a Toggle color yet but an alternative way to have a blue switch or any other custom views, is to create a custom view of your own. To make a custom blue toggle in its simplest form:

struct BlueToggle : UIViewRepresentable {
  func makeUIView(context: Context) -> UISwitch {
    UISwitch()
  }

  func updateUIView(_ uiView: UISwitch, context: Context) {
    uiView.onTintColor = UIColor.blue
  }
}

struct ContentView : View {
    var body: some View {
      BlueToggle()
    }
}

Result:

answered Jun 06 '19 at 15:25

M Reza

18,350
14
66
71

Thanks for this. I'll wait with accepting the answer to see if there's another answer coming up. – LinusGeffarth Jun 06 '19 at 16:22
How would I use this custom toggle with the same init `Toggle` has: `init(isOn: Binding, label: () -> Label)`? – LinusGeffarth Jun 06 '19 at 16:34
@LinusGeffarth To achieve that I think it's needed to also use `UIViewControllerRepresentable` but not sure. Check this example: https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit it's not exactly what you asked but it's a more complicated way of dealing with custom views! – M Reza Jun 06 '19 at 17:07

score 7 · Answer 5 · answered Nov 08 '19 at 14:50

7

You can modify the global onTintColor for all UISwitch objects inside init().

@State var enable_dhcp = true

init()
{
    UISwitch.appearance().onTintColor = .red
}

var body: some View
{
    Toggle("DHCP", isOn: $enable_dhcp)
}

answered Nov 08 '19 at 14:50

George Valkov

1,217
12
10

score 6 · Answer 6 · answered Dec 29 '19 at 03:17

Building off @mohammad-reza-farahani 's solution, here is a fully uncompromising approach to getting the configurability of UISwitch with the implementation protocols if SwiftUI.

First wrap a UISwitch in a UIViewRepresentable and set the colors as you wish:

final class CustomToggleWrapper: UIViewRepresentable {
    var isOn: Binding<Bool>

    init(isOn: Binding<Bool>) {
        self.isOn = isOn
    }

    func makeUIView(context: Context) -> UISwitch {
        UISwitch()
    }

    func updateUIView(_ uiView: UISwitch, context: Context) {
        // On color
        uiView.onTintColor = UIColor.blue
        // Off color
        uiView.tintColor = UIColor.red
        uiView.layer.cornerRadius = uiView.frame.height / 2
        uiView.backgroundColor = UIColor.red
        uiView.isOn = isOn.wrappedValue

        // Update bound boolean
        uiView.addTarget(self, action: #selector(switchIsChanged(_:)), for: .valueChanged)
    }

    @objc
    func switchIsChanged(_ sender: UISwitch) {
        isOn.wrappedValue = sender.isOn
    }
}

Second, create a custom toggle style using the wrapped UISwitch:

struct CustomToggleStyle: ToggleStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        let toggle = CustomToggleWrapper(isOn: configuration.$isOn)

        return HStack {
            configuration.label
            Spacer()
            toggle
        }
    }
}

Implement a Toggle as you normally would, and apply your CustomToggleStyle:

struct TestView: View {
    @State private var isOn: Bool = true

    var body: some View {
        Toggle(
            isOn: $isOn
        ) {
            Text("Test: \(String(isOn))")
        }.toggleStyle(CustomToggleStyle()).padding()
    }
}

This works well. You can animate the changes with `uiView.setOn(isOn.wrappedValue, animated: context.transaction.animation != nil && !context.transaction.disablesAnimations)` inside the `updateUIView` function. — Matthew, Sep 23 '21 at 08:02
FYI, this approach was great at first but recently failed with the latest XCode 14 (mine was 14.2), XCode 14 demand that `UIViewRepresentable` is to used on a `struct` instead of a `class`, the crash will happen at runtime — L N, Jan 25 '23 at 01:35

score 4 · Answer 7 · edited Mar 15 '20 at 09:42

Karol Kulesza and George Valkov have provided a very easy to implement solution. I just wanted to add that you can place the code below inside the app delegate's didFinishLaunching method as well.

UISwitch.appearance().onTintColor = .blue

You can also create more specific appearance configurations with

appearance(whenContainedInInstancesOf:)

See https://www.hackingwithswift.com/example-code/uikit/what-is-the-uiappearance-proxy

score 3 · Answer 8 · answered Nov 22 '21 at 06:56

You can change the toggle color in IOS 15.0 using a tint modifier.

Toggle(isOn: $isToggleOn) {
       Text("Toggle")
    }.tint(.red)

and below IOS 15.0, You can use toggleStyle modifier to change the toggle color but it will be depreciated in the future.

 Toggle(isOn: $isToggleOn) {
    Text("Toggle")
 }.toggleStyle(SwitchToggleStyle(tint: .red))

score 2 · Answer 9 · answered Feb 05 '20 at 12:33

As the original question was just about changing the toggle on colour and not full Toggle visual customisation, I think something like this would do:

import SwiftUI

struct CustomToggle: UIViewRepresentable {
  @Binding var isOn: Bool

  func makeCoordinator() -> CustomToggle.Coordinator {
    Coordinator(isOn: $isOn)
  }

  func makeUIView(context: Context) -> UISwitch {
    let view = UISwitch()
    view.onTintColor = UIColor.red
    view.addTarget(context.coordinator, action: #selector(Coordinator.switchIsChanged(_:)), for: .valueChanged)

    return view
  }

  func updateUIView(_ uiView: UISwitch, context: Context) {
    uiView.isOn = isOn
  }

  class Coordinator: NSObject {
    @Binding private var isOn: Bool

    init(isOn: Binding<Bool>) {
      _isOn = isOn
    }

    @objc func switchIsChanged(_ sender: UISwitch) {
      _isOn.wrappedValue = sender.isOn
    }
  }
}

// MARK: - Previews

struct CustomToggle_Previews: PreviewProvider {
  static var previews: some View {
    ViewWrapper()
  }

  struct ViewWrapper: View {
    @State(initialValue: false) var isOn: Bool

    var body: some View {
      CustomToggle(isOn: $isOn)
        .previewLayout(.fixed(width: 100, height: 100))
    }
  }
}

score 2 · Answer 10 · answered Aug 25 '21 at 09:17

The easist way is setting UISwitch.appearance().onTintColor = UIColor.red before using toggle and use SwiftUI Toggle like below.

UISwitch.appearance().onTintColor = UIColor.red
...

let toggle = Toggle(isOn: $vm.dataUsePermission, label: {
    Text(I18N.permit_data_usage)
        .font(SwiftUI.Font.system(size: 16, weight: .regular))
})

if #available(iOS 14.0, *) {
    toggle.toggleStyle(
        SwitchToggleStyle(tint: Color(UIColor.m.blue500))
    )
} else {
    toggle.toggleStyle(SwitchToggleStyle())
}

...

You can alse use same Toggle interface in SwiftUI but different name, and change tint color.


TintableSwitch(isOn: .constant(true), label: {
    Text("Switch")
})

Toggle(isOn: .constant(true), label: {
    Text("Switch")
})

If only need Toggle without Label, then

TintableUISwitch(isOn: .constant(true))

Use below code.

import SwiftUI

public struct TintableSwitch<Label>: View where Label: View {

    @Binding var isOn: Bool

    var label: Label

    public init(isOn: Binding<Bool>, @ViewBuilder label: () -> Label) {
        self._isOn = isOn
        self.label = label()
    }

    public var body: some View {
        HStack {
            label
            Spacer()
            TintableUISwitch(isOn: $isOn, onTintColor: .red) //  CHANGE HERE
        }
    }
}

public struct TintableUISwitch: UIViewRepresentable {

    @Binding var isOn: Bool
    private var onTintColor: UIColor

    public init(isOn: Binding<Bool>, onTintColor: UIColor = UIColor.m.blue500) {
        self._isOn = isOn
        self.onTintColor = onTintColor
    }

    public func makeUIView(context: Context) -> UISwitch {
        let uiSwitch = UISwitch()
        uiSwitch.addTarget(
            context.coordinator,
            action: #selector(Coordinator.valueChanged(_:)),
            for: .valueChanged
        )
        uiSwitch.onTintColor = onTintColor
        uiSwitch.isOn = isOn
        return uiSwitch
    }

    public func updateUIView(_ uiView: UISwitch, context: Context) {
        uiView.isOn = isOn
    }

    public func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    public class Coordinator: NSObject {

        var tintableSwitch: TintableUISwitch

        init(_ tintableSwitch: TintableUISwitch) {
            self.tintableSwitch = tintableSwitch
        }

        @objc
        func valueChanged(_ sender: UISwitch) {
            tintableSwitch.isOn = sender.isOn
        }
    }
}

struct TintableSwitch_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            TintableSwitch(isOn: .constant(true), label: {
                Text("Switch")
            })

            Toggle(isOn: .constant(true), label: {
                Text("Switch")
            })
        }
    }
}

struct TintableUISwitch_Previews: PreviewProvider {
    static var previews: some View {
        TintableUISwitch(isOn: .constant(true))
    }
}

score 1 · Answer 11 · answered Aug 04 '21 at 10:13

I would change @Mark Moeykens answer a little bit to avoid having the button tap animation. A better solution would be:

@available(iOS 13.0, *)
struct ColoredToggleStyle: ToggleStyle {
    var label = ""
    var onColor = UIColor.proacPrimaryBlue.suColor
    var offColor = UIColor.systemGray5.suColor
    var thumbColor = Color.white

    func makeBody(configuration: Self.Configuration) -> some View {
        HStack {
            Text(label)
            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.1))
                .onTapGesture {
                    configuration.isOn.toggle()
                }
        }
        .font(.title)
        .padding(.horizontal)
    }
}

score 0 · Answer 12 · answered Sep 01 '19 at 09:08

This https://stackoverflow.com/a/56480720/5941807 (for now whit Xcode 11 beta 6) is a solution. To switch between to option a fast way is using the boolean instead of if/else:

showFavoritesOnly ? .red : .blue

for foreground:

Toggle(isOn: $showGreeting) {
  Text("Show Favorites only").foregroundColor(showFavoritesOnly ? .blue : .gray)
}

for tint:

uiView.onTintColor = showFavoritesOnly ? UIColor.blue : UIColor.gray

In addition for custom colors: https://stackoverflow.com/a/57744208/5941807