Category: 05. SwiftUI Basics

SwiftUI Styling Theming

Centralize colors and styles with a theme to keep your app consistent and easy to update.

---

Centralize styles with a Theme

Define a Theme type to hold colors and spacing, then apply them throughout your views for consistency.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct Theme {
  static let primary = Color.blue
  static let cardBG = Color.blue.opacity(0.1)
}

struct ThemedCard: View {
  var body: some View {
Text("Hello")
  .padding()
  .background(Theme.cardBG)
  .cornerRadius(8)
  .foregroundStyle(Theme.primary)
  }
}

SwiftUI Styling Materials

Use built-in blur materials like .regularMaterial to create depth and visual hierarchy.

---

Use materials to add depth

Materials are frosted blur effects that add depth and visual hierarchy to your app.

The difference between materials is their opacity and blur amount.

The most common materials are:

• .regularMaterial – Frosted blur with a medium amount of blur and opacity.
• .thickMaterial – Frosted blur with a thick amount of blur and opacity.
• .thinMaterial – Frosted blur with a thin amount of blur and opacity.

Apply a material fill (for example .regularMaterial) to create a frosted backdrop behind content.

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()
}
  }
}

SwiftUI Styling Color Schemes

Use light/dark modes and the system color palette to keep your UI readable and consistent.

---

Read the current color scheme

Access the environment’s color scheme to adapt your UI for light or dark mode.

Example

Demo.swift

ContentView.swift

App.swift

import SwiftUI

struct ColorSchemesDemo: View {
  @Environment(\.colorScheme) var scheme
  var body: some View {
Text(scheme == .dark ? "Scheme: Dark" : "Scheme: Light")
  .padding()
  }
}

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)
}
  }
}