SwiftUI Styling & Theming

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.