Gauge Colors

Customizing the colors of different styles with minimal effort

Gauge Colors - iOS Light Mode Preview

Platform Compatibility

iOS 16.0+ iPadOS 16.0+ macOS 13.0+ watchOS 7.0+ visionOS 1.0+

Tags

SwiftUI Code

Docs 
@State private var currentValue = 0.42

    var body: some View {
        VStack {
            HStack {
                Gauge(value: currentValue) {
                    Text("Foo")
                } currentValueLabel: {
                    Text("42")
                        .foregroundColor(.indigo)
                } minimumValueLabel: {
                    Text("0")
                        .foregroundColor(.mint)
                } maximumValueLabel: {
                    Text("100")
                        .foregroundColor(.blue)
                }
                .gaugeStyle(.accessoryCircular)

                Gauge(value: currentValue) {
                    Text("Foo")
                } currentValueLabel: {
                    Text("42")
                } minimumValueLabel: {
                    Text("0")
                } maximumValueLabel: {
                    Text("100")
                }
                .gaugeStyle(.accessoryCircularCapacity)
            }
            Gauge(value: currentValue) {
                Text("Foo")
            } currentValueLabel: {
                Text("42")
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                Text("100")
            }
            .gaugeStyle(.linearCapacity)
            Gauge(value: currentValue) {
                Text("Foo")
            } currentValueLabel: {
                Text("42")
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                Text("100")
            }
            .gaugeStyle(.accessoryLinear)

            Gauge(value: currentValue) {
                Text("Foo")
            } currentValueLabel: {
                Text("42")
            } minimumValueLabel: {
                Text("0")
            } maximumValueLabel: {
                Text("100")
            }
            .gaugeStyle(.accessoryLinearCapacity)
        }
        .tint(Gradient(colors: [.green, .orange, .red]))
        .foregroundStyle(.brown)
}

Found an issue or have a suggestion?

Created: June 3, 2025Updated: June 3, 2025