foregroundStyle

`foregroundStyle(style)`

Parameter	Type	Description
`style`	Color \| { color: Color, type: 'color' } \| { style: 'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'quinary', type: 'hierarchical' } \| { colors: Color[], endPoint: { x: number, y: number }, startPoint: { x: number, y: number }, type: 'linearGradient' } \| { center: { x: number, y: number }, colors: Color[], endRadius: number, startRadius: number, type: 'radialGradient' } \| { center: { x: number, y: number }, colors: Color[], type: 'angularGradient' }	The foreground style configuration. Can be: . *Simple Color (`Color`):

Hex colors: '#FF0000', '#RGB', '#RRGGBB', '#AARRGGBB'
Named colors: 'red', 'blue', 'green', and so on.
React Native color values like PlatformColor('label')

. Explicit Color Object: .

{ type: 'color', color: PlatformColor('label') }

. Hierarchical Styles (Semantic): Auto-adapting semantic styles that respond to light/dark mode and accessibility settings: .

{ type: 'hierarchical', style: 'primary' }    // Most prominent (main content, headlines)
{ type: 'hierarchical', style: 'secondary' }  // Supporting text, subheadlines
{ type: 'hierarchical', style: 'tertiary' }   // Less important text, captions
{ type: 'hierarchical', style: 'quaternary' } // Subtle text, disabled states
{ type: 'hierarchical', style: 'quinary' }    // Most subtle (iOS 16+, fallback to quaternary)

. Linear Gradient: .

{
  type: 'linearGradient',
  colors: [PlatformColor('systemPink'), '#0000FF', '#00FF00'],
  startPoint: { x: 0, y: 0 },    // Top-left
  endPoint: { x: 1, y: 1 }       // Bottom-right
}

. Radial Gradient: .

{
  type: 'radialGradient',
  colors: [PlatformColor('systemPink'), '#0000FF'],
  center: { x: 0.5, y: 0.5 },    // Center of view
  startRadius: 0,                // Inner radius
  endRadius: 100                 // Outer radius
}

. Angular Gradient (Conic): .

{
  type: 'angularGradient',
  colors: [PlatformColor('systemPink'), '#00FF00', '#0000FF'],
  center: { x: 0.5, y: 0.5 }     // Rotation center
}

Sets the foreground style of a view with comprehensive styling options.

Replaces the deprecated foregroundColor modifier with enhanced capabilities including colors, gradients, and semantic hierarchical styles that adapt to system appearance.

Returns: ModifierConfig

A view modifier that applies the specified foreground style

See: Official SwiftUI documentation.

Example

// Simple usage
<Text modifiers={[foregroundStyle('#FF0000')]}>Red Text</Text>

// Adaptive hierarchical styling
<Text modifiers={[foregroundStyle({ type: 'hierarchical', style: 'secondary' })]}>
  Supporting Text
</Text>

// Linear gradient
<Text modifiers={[foregroundStyle({
  type: 'linearGradient',
  colors: ['#FF6B35', '#F7931E', '#FFD23F'],
  startPoint: { x: 0, y: 0 },
  endPoint: { x: 1, y: 0 }
})]}>
  Gradient Text
</Text>

Works with

You can add foregroundStyle to any view. It changes what you see on 37 of the 39 components.

No visible effect

These components accept it, but you see no change.

Component	Why nothing happens
Spacer	It changes how the view is drawn, and Spacer draws nothing that you can see.
Divider	`Divider` ignores this. Use `overlay` with a colour to change the colour of the line.

Sources

The original Expo docs for this page:

foregroundStyle (Modifiers) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/modifiers.md)