swiftswiftui

Change background color of TextEditor in SwiftUI


TextEditor seems to have a default white background. So the following is not working and it displayed as white instead of defined red:

var body: some View {
    TextEditor(text: .constant("Placeholder"))
        .background(Color.red)
}

Is it possible to change the color to a custom one?


Solution

  • iOS 16

    You should hide the default background to see your desired one:

    TextEditor(text: .constant("Placeholder"))
        .scrollContentBackground(.hidden) // <- Hide it
        .background(.red) // To see this
    

    iOS 15 and below

    TextEditor is backed by UITextView. So you need to get rid of the UITextView's backgroundColor first and then you can set any View to the background.

    struct ContentView: View {
        init() {
            UITextView.appearance().backgroundColor = .clear
        }
    
        var body: some View {
            List {
                TextEditor(text: .constant("Placeholder"))
                    .background(.red)
            }
        }
    }
    

    Demo

    enter image description here

    You can find my simple trick for growing TextEditor here in this answer