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.

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

import SwiftUI

struct ContentView: View {
  var body: some View { ThemeDemo() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

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.

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

import SwiftUI

struct ContentView: View {
  var body: some View { MaterialCard() }
}

import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

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