Author: saqibkhan

SwiftUI Styling & Theming

Use colors, materials, and color schemes to style your app, and centralize appearance with theming.

---

Accent & Color Schemes

Use .tint to set the accent color, and .colorScheme to access the current color scheme.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct ThemeDemo: View {
  @Environment(\.colorScheme) var scheme
  var body: some View {
VStack(spacing: 12) {
  RoundedRectangle(cornerRadius: 8)
    .fill(.tint)
    .frame(height: 80)
    .overlay(Text("Tint").foregroundStyle(.white))
  Text(scheme == .dark ? "Scheme: Dark" : "Scheme: Light")
}
.padding()
  }
}

The example above shows a card with a frosted backdrop behind content.

Materials

Use .material to set the material, and .colorScheme to access the current color scheme.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct MaterialCard: View {
  var body: some View {
ZStack {
  Image(systemName: "photo.fill").resizable().scaledToFill().ignoresSafeArea()
  RoundedRectangle(cornerRadius: 12).fill(.regularMaterial)
    .frame(height: 120)
    .overlay(Text("Regular Material").font(.headline))
    .padding()
}
  }
}

The example above shows a card with a frosted backdrop behind content.

SwiftUI Accessibility Focus & VoiceOver

Control accessibility focus and provide useful labels for VoiceOver users.

---

Control focus programmatically

Use @AccessibilityFocusState to move focus to a specific element in response to user actions.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct FocusA11yDemo: View {
  @AccessibilityFocusState private var focused: Bool
  var body: some View {
VStack(spacing: 12) {
  Text("Status").accessibilityFocused($focused)
  Button("Focus Status") { focused = true }
}
.padding()
  }
}

The example above shows a card with a frosted backdrop behind content.

Scale text with Dynamic Type

Allow text to scale across accessibility sizes and preview larger sizes to verify readability.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct DynamicTypeDemo: View {
  var body: some View {
VStack(spacing: 8) {
  Text("Title").font(.title)
  Text("Body text that scales with accessibility settings.")
}
.padding()
.dynamicTypeSize(.accessibility2 ... .xxxLarge)
  }
}

Add accessible labels, values, and hints

Annotate text and buttons with .accessibilityLabel, .accessibilityValue, and .accessibilityHint so assistive tech conveys meaning.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct A11yLabelsDemo: View {
  @State private var count = 0
  var body: some View {
VStack(spacing: 12) {
  Text("Count: \(count)")
    .accessibilityLabel("Current count")
    .accessibilityValue("\(count)")
  Button("Increment") { count += 1 }
    .accessibilityHint("Increases the count by one")
}
  }
}

The example above shows a label, value, and hint for a control.

SwiftUI Accessibility

Label controls, expose values and hints, and support Dynamic Type and VoiceOver in SwiftUI.

---

Labels & Values

Provide assistive technologies with descriptive labels, values, and hints so controls are clear and usable.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct A11yDemo: View {
  @State private var count = 0
  var body: some View {
VStack(spacing: 12) {
  Text("Count: \(count)")
    .accessibilityLabel("Current count")
    .accessibilityValue("\(count)")
  Button("Increment") { count += 1 }
    .accessibilityHint("Increases the count by one")
}
  }
}

The example above shows a label, value, and hint for a control.

---

Grouping

Combine related views into one accessibility element so VoiceOver reads them together as a single item.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct Badge: View {
  var body: some View {
VStack {
  Image(systemName: "star.fill")
  Text("Premium plan")
}
.accessibilityElement(children: .combine)
  }
}

Preview light and dark modes

Set a preferred color scheme in previews to spot contrast issues and verify colors in both modes.

Example

DarkMode.swift

import SwiftUI

struct DemoView: View { var body: some View { Text("Hello") } }

#Preview("Light") {
  DemoView()
.preferredColorScheme(.light)
}

#Preview("Dark") {
  DemoView()
.preferredColorScheme(.dark)
}

In the example above, the .preferredColorScheme(.dark) modifier is used to set the preferred color scheme to dark.

SwiftUI Previews Variants & States

Preview multiple configurations by creating different states and variants in your preview provider.

---

Preview multiple variants side-by-side

Use a Group in your preview to render several configurations at once for quick comparison.

Example

Variants.swift

import SwiftUI

struct Badge: View { let color: Color; var body: some View { Circle().fill(color).frame(width: 40, height: 40) } }

struct Badge_Previews: PreviewProvider {
  static var previews: some View {
Group {
  Badge(color: .blue)
  Badge(color: .green)
}
  }
}

PreviewProvider

Define a PreviewProvider to render your view in the canvas without running the app.

Example

PreviewProvider.swift

import SwiftUI

struct DemoView: View { var body: some View { Text("Hello") } }

struct DemoView_Previews: PreviewProvider {
  static var previews: some View { DemoView() }
}

---

---

#Preview Macro

Use the #Preview macro to declare previews inline next to your view code.

Example

#Preview.swift

import SwiftUI

#Preview { DemoView() }

SwiftUI Custom Modifiers

Create reusable styling and behavior by defining your own ViewModifier types or extension helpers.

---

Build a reusable ViewModifier

Encapsulate styling in a custom modifier and expose it via a View extension for reuse.

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct CardStyle: ViewModifier {
  func body(content: Content) -> some View {
content
  .padding()
  .background(.blue.opacity(0.1))
  .cornerRadius(8)
  }
}

extension View {
  func card() -> some View { modifier(CardStyle()) }
}

struct CustomModifiersDemo: View {
  var body: some View { Text("Hello").card() }
}

SwiftUI ViewBuilder

Use @ViewBuilder to compose multiple child views in a single return position.

---

Compose rows with @ViewBuilder

Extract a reusable row builder using @ViewBuilder and combine multiple child views without extra containers.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

@ViewBuilder
func InfoRow(_ title: String, _ value: String) -> some View {
  HStack { Text(title).bold(); Spacer(); Text(value) }
}

struct ViewBuilderDemo: View {
  var body: some View {
VStack(spacing: 8) {
  InfoRow("Name", "SwiftUI")
  InfoRow("Version", "5+")
}
.padding()
  }
}