A quick tip on changing the background of SwiftUI scrollable views like lists and forms.

Scrollable View Default Backgrounds

SwiftUI has several scrollable views such as ScrollView, List, Form, and Table. Here’s my SwiftUI form with a multi-line text field:

Form {
  Section("Your details") {
    TextField("email", text: $email, axis: .vertical)
      .lineLimit(3)
    }

    Section("Feedback") {
      TextEditor(text: $text)
    }
}

This shows up with a gray background by default:

What’s confusing is that you cannot change that light gray default background by applying a background modifier. For example, this has no effect:

Form { ...
}
.background(Color.cyan.gradient,
  in: RoundedRectangle(cornerRadius: 8))

I’m using a Form but the same problem exists with the other SwiftUI scrollable views like List. Why doesn’t it just work?

Hiding the default

The problem is that SwiftUI scrolling views like List and Form all have a default system background. Adding our own background has no visible effect as it’s hidden by the system background.

Apple added a new modifier in iOS 16 that allows you to change the visibility of the system background of scrollable views. Changing the visibility to .hidden allows my cyan background to show through:

Form { ...
}
.scrollContentBackground(.hidden)
.background(Color.cyan.gradient,
  in: RoundedRectangle(cornerRadius: 8))

Lists No Longer Use Table Views (iOS 16)

A word of warning. In the past SwiftUI Lists and Forms used a UITableView for their iOS implementation. This allowed a quick workaround by overriding the table view appearance to clear the default background:

UITableView.appearance().backgroundColor = .clear

That no longer works in iOS 16. From the iOS 16 release notes:

The implementation of list no longer uses UITableView. (81571203)

Use the .scrollContentBackground modifier instead.