25

I wanna change that "light gray" background color for a form, but .foregroundColor(Color.blue) and .background(Color.blue) does not seem to work

struct ContentView : View {

 @State var value = ""

    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField($value)
            }
            Section(header: Text("Last Name")) {
                TextField($value)
            }
        }.foregroundColor(Color.blue)

    }
}

enter image description here

3
  • 1
    You probably need to post more code, because something as basic as a background modifier feels like it's not your issue. Is this a modal popup? Are you working with a ZStack? Please, give us more details, or accept the answer given by @Quinn. Let us duplicate the issue.
    – user7014451
    Jul 29, 2019 at 13:43
  • @dfd That's the only view I have, a form with 2 fields (it's meant to be a registration form), I'll probably add a button, but there isn't any popup or ZStack. I already tried .background(Color.blue) on Form, but it does not work. I guess Form is a special view or maybe it's just a bug and someone found an workaround
    – Sorin Lica
    Jul 29, 2019 at 18:15
  • Found it. I'll post an answer, and if you need some tweaking, let me know.
    – user7014451
    Jul 29, 2019 at 18:45

7 Answers 7

52

A Working Solution:

All SwiftUI's Lists are backed by a UITableViewin iOS. so you need to change the background color of the tableView. But since Color and UIColor values are slightly different, you can get rid of the UIColor.

struct ContentView: View {
    
    init(){
        UITableView.appearance().backgroundColor = .clear
    }
    
    @State var value = ""
    
    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField("First Name", text: $value)
            }
            Section(header: Text("Last Name")) {
                TextField("Last Name", text: $value)
            }
        }
        .foregroundColor(Color.blue)
        .background(Color.yellow)
    }
}

Now you can use Any background (including all Colors) you want

Preview

Note that those top and bottom white areas are safe are and you can use .edgesIgnoringSafeArea() modifier to get rid of them.


Restore

Since UITableView.appearance().backgroundColor applies globally, you can use .onAppear modifier to change it in different views (since it is a global change). So you can use another onAppear or onDisappear to reset it back to what you want.

And the default colors are:

UIColor.systemGroupedBackground for the grouped style. And

UIColor.systemBackground for the plain style.

And they both have automatic support for both dark mode and light mode.

9
  • UITableView.appearance().backgroundColor = .clear changes the style universally, which is not an ideal solution. But, there is no alternative solution that I could find. Aug 18, 2020 at 13:01
  • you can use .onAppear() modifier to make it act like it is just for that page. ;) @WilliamGrand Aug 18, 2020 at 13:03
  • Hmm, my experience on Xcode 11.6 and Xcode 12 beta 4 is that .onAppear() applies universally. Aug 18, 2020 at 13:52
  • Of course you should use another onAppear or onDisappear to reset it back to what you want ;) @WilliamGrand Aug 18, 2020 at 14:06
  • 3
    This is no longer correct for iOS 14. UITableView no longer backs Lists.
    – Ben Patch
    Nov 21, 2020 at 16:45
9

try this

.onAppear {
   UITableView.appearance().backgroundColor = .blue
}
1
  • 1
    UITableView.appearance().backgroundColor = .blue changes the style universally, which is not an ideal solution. But, there is no alternative solution that I could find. Aug 18, 2020 at 13:02
8

The accepted answer by Mojtaba Hosseini, above, works but the init() statement is not a good place for the UITableView statement. This is because it "hard codes" the ContentView's init parameters. In this case it has none so everything works but if an @ObservedObject was added to the view then this would break the init function.

Much simpler just to add the UITable statement to the body, explicitly return the Form and delete the init().

var body: some View {
    UITableView.appearance().backgroundColor = .clear
    return Form {...}
 }

However, setting the background colour on the Form usually works as expected. The fact that it is not working on the ContentView screen may be a bug.

1
  • Error: Type '()' cannot conform to 'View'; only struct/enum/class types can conform to protocols
    – FontFamily
    Nov 19, 2020 at 17:47
5

Don't change the global appearance().

You can use UITableView.appearance().backgroundColor = .red for example to set the Form's background color to red. This can go in the init of the view, however this affects every List and Form.

Alternatively, you could use SwiftUI-Introspect to customise a single one by doing something like:

struct ContentView: View {
    @State private var value = ""

    var body: some View {
        Form {
            Section(header: Text("First Name")) {
                TextField("First", text: $value)
            }

            Section(header: Text("Last Name")) {
                TextField("Last", text: $value)
            }
        }
        .introspectTableView { $0.backgroundColor = .systemBlue }
        .foregroundColor(Color.blue)
    }
}

Result

You can also add the following to each section to make the sections blue too:

.listRowBackground(Color.blue)
1

If you don't want to modify safe area of the Form, you can use ZStackas well:

struct ContentView: View {
    
    init(){
        
        UITableView.appearance().backgroundColor = .clear
    }
    
    @State var value = ""
    
    var body: some View {
        ZStack {
            Color(UIColor.systemYellow)
                .edgesIgnoringSafeArea(.all)
            Form {
                Section(header: Text("First Name")) {
                    TextField("First Name", text: $value)
                }
                Section(header: Text("Last Name")) {
                    TextField("Last Name", text: $value)
                }
            }
        }
    }
}
0

Copy these codes below each of your Form view:

Form {
    // Your form view 
} 
.onAppear { // ADD THESE AFTER YOUR FORM VIEW
    UITableView.appearance().backgroundColor = .clear 
}
.onDisappear { // CHANGE BACK TO SYSTEM's DEFAULT
    UITableView.appearance().backgroundColor = .systemGroupedBackground 
} 
.background(.yellow) // Add your background color
-1

The solutions above didn't really work for what I was trying to achieve. I wanted an initial screen with a clear background for the form, and subsequent screens to have the default iOS systemGroupedBackground color. Using appear() and disappear() didn't work for me as switching between various tabs was leading to bugs in the appearance.

I came up with the following solution. It borrows from the solutions above.

For my ContentView screen, I inserted this code just inside the Struct.

init(){
    UITableView.appearance().backgroundColor = .clear
}

This is a global change that affects all forms.

For all forms where I wanted the default color to work, I inserted this code just outside the Form {}.

.background(Color(.systemGroupedBackground))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.