Interactive previews iPhone

UIKit Content Background colors

The UIKit colors that are also used in other components like in List and GroupBox

UIKit Content Background colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview

Platform Compatibility

iOS 13.0.+ iPadOS 13.0+ visionOS 1.0+

Tags

SwiftUI Code

Docs
VStack {
  List {
    Section {
      Text("content")
    }
  }
  .frame(maxHeight: 50)
  HStack {
    smallRect
    // can also be used as inverted text color
      .foregroundStyle(Color(.systemBackground))
    smallRect
    // GroupBox content backgroud
      .foregroundStyle(Color(.secondarySystemBackground))
    smallRect
      .foregroundStyle(Color(.tertiarySystemBackground))
    smallRect
    // can also be used as inverted text color
    // List background
      .foregroundStyle(Color(.systemGroupedBackground))
    smallRect
    // List content background
      .foregroundStyle(Color(.secondarySystemGroupedBackground))
    smallRect
      .foregroundStyle(Color(.tertiarySystemGroupedBackground))
  }
  GroupBox {
    Text("content")
  }
  .frame(maxHeight: 50)
}

Found an issue or have a suggestion?

Created: May 29, 2025Updated: May 29, 2025
Connect Wizard

Connect Wizard

Unlock insights App Store Connect doesn’t show you.

Get Started

More Color Components

View all
Color Opacity - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
style

Color Opacity

The Color opacity modifier

Color Gradient - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Color Gradient

The Color gradient modifier

UIKit Separator Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Separator Colors

The UIKit separator colors that are also used in other components, such as the TextField

UIKit Text Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Text Colors

The UIKit text colors that are also used in other components, such as the TextField

UIKit Fill Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Fill Colors

UIKit Label Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

UIKit Label Colors

Color Variants - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Color Variants

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

Semantic Colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
type

Semantic Colors

Explore Other Components

Browse all
Edit Button - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
initializer

Edit Button

A button that toggles the edit mode environment value.

Menu Fixed Order - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

Menu Fixed Order

Order items from top to bottom

Bottom Accessory - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview

Bottom Accessory

A modifier to place content above the tabs

GroupedTabViewStyle - macOS - Liquid Glass - Light Mode - Preview
style

GroupedTabViewStyle

A tab view style that displays a tab bar that groups its tabs together.

AccessoryLinearCapacityGaugeStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

AccessoryLinearCapacityGaugeStyle

A gauge style that displays bar that fills from leading to trailing edges as the gauge’s current value increases

Picker Section - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
content

Picker Section

A Section inside a Picker

CompactMenuControlGroupStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

CompactMenuControlGroupStyle

A control group style that presents its content as a compact menu when the user presses the control, or as a submenu when nested within a larger menu

ToolbarSpacer - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

ToolbarSpacer

A standard space item in toolbars