Color Variants

HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles

Color Variants - iOS Light Mode Preview

Platform Compatibility

iOS 15.0+ iPadOS 15.0+ macOS 12.0+ watchOS 8.0+ tvOS 15.0+ visionOS 1.0+

Tags

SwiftUI Code

Docs
VStack {
  HStack {
    smallRect
      .foregroundStyle(.blue)
    smallRect
      .foregroundStyle(.blue.secondary)
    smallRect
      .foregroundStyle(.blue.tertiary)
    smallRect
      .foregroundStyle(.blue.quaternary)
    smallRect
      .foregroundStyle(.blue.quinary)
  }
  HStack {
    smallRect
      .foregroundStyle(.red)
    smallRect
      .foregroundStyle(.red.secondary)
    smallRect
      .foregroundStyle(.red.tertiary)
    smallRect
      .foregroundStyle(.red.quaternary)
    smallRect
      .foregroundStyle(.red.quinary)
  }
  HStack {
    smallRect
      .foregroundStyle(.orange)
    smallRect
      .foregroundStyle(.orange.secondary)
    smallRect
      .foregroundStyle(.orange.tertiary)
    smallRect
      .foregroundStyle(.orange.quaternary)
    smallRect
      .foregroundStyle(.orange.quinary)
  }
  // ...
}

Found an issue or have a suggestion?

Created: May 29, 2025Updated: May 31, 2025