How to Change FullScreenCover Background Color in SwiftUI

When creating apps in SwiftUI, you’ll often find yourself needing to present full-screen modals to the user. While the default fullScreenCover offers excellent functionality out-of-the-box, you might want to customize its appearance. One such customization is changing the background color.

In this blog post, we’ll explore how to set a background color for a fullScreenCover in SwiftUI.

The Basic Setup

First, let’s take a look at a simple example that shows a fullScreenCover with a yellow background color.

import SwiftUI

struct ContentView: View {
    @State private var isModalPresented = false

    var body: some View {
        Button("Show Full-Screen Modal") {
            isModalPresented.toggle()
        }
        .fullScreenCover(isPresented: $isModalPresented) {
            VStack {
                Text("This is a full-screen modal")
                Button("Dismiss") {
                    isModalPresented.toggle()
                }
            }.frame(maxWidth: .infinity, maxHeight: .infinity).background(.yellow)
        }
    }
}

Here, clicking the “Show Full-Screen Modal” button will open a modal with a yellow background.

To change the background color of the full-screen modal, you can use the .background() modifier and set it to your desired color.

Why Background Color Matters

The background color is more than just an aesthetic choice; it can significantly impact user experience. Choosing the right color can provide a better contrast for your text and other UI elements, making your app more accessible and easier to navigate.

Advanced Customization: Gradients

You can go beyond solid colors by using gradients. SwiftUI provides linear, radial, and angular gradients. Here’s how to implement a linear gradient:

import SwiftUI

struct ContentView: View {
    @State private var isModalPresented = false

    var body: some View {
        Button("Show Full-Screen Modal") {
            isModalPresented.toggle()
        }
        .fullScreenCover(isPresented: $isModalPresented) {
            VStack {
                Text("This is a full-screen modal")
                Button("Dismiss") {
                    isModalPresented.toggle()
                }
            }.frame(maxWidth: .infinity, maxHeight: .infinity).background(LinearGradient(gradient: Gradient(colors: [.pink, .green]), startPoint: .top, endPoint: .bottom))
        }
    }
}

Changing the background color in a SwiftUI fullScreenCover is straightforward but can have a significant impact on the look and feel of your app. Whether you choose a solid color or a gradient, the process is relatively simple, allowing you to focus on other aspects of your app’s user experience.