Introduction

Changing a TextEditor background color in SwiftUI is slightly trickier than it first appears because the editor is backed by a scrolling text system rather than being a simple painted rectangle. A plain .background(...) modifier often colors only the outer container, so the correct approach depends on the iOS version and how much styling control you need.

Why .background alone can be misleading

This looks reasonable:

TextEditor(text: $text)
    .background(Color.yellow)

But in practice you may see the color only around the editor while the actual editable region keeps the default system background. That happens because the scrolling content background is separate from the outer SwiftUI view layer.

Preferred solution on modern iOS

On iOS 16 and later, the clean solution is to hide the scroll content background and then apply your own background color.

1import SwiftUI
2
3struct EditorView: View {
4    @State private var text = "Write here"
5
6    var body: some View {
7        TextEditor(text: $text)
8            .scrollContentBackground(.hidden)
9            .background(Color.yellow.opacity(0.25))
10            .padding()
11    }
12}

The important part is scrollContentBackground(.hidden). Without it, your custom background may not visually replace the editor’s internal default background.

Building a reusable styled editor

Real apps usually want more than just background color. They want padding, a border, placeholder text, and rounded corners.

1import SwiftUI
2
3struct StyledEditor: View {
4    @Binding var text: String
5
6    var body: some View {
7        ZStack(alignment: .topLeading) {
8            if text.isEmpty {
9                Text("Enter notes")
10                    .foregroundColor(.secondary)
11                    .padding(.top, 12)
12                    .padding(.leading, 10)
13            }
14
15            TextEditor(text: $text)
16                .scrollContentBackground(.hidden)
17                .padding(8)
18                .background(Color(uiColor: .secondarySystemBackground))
19                .cornerRadius(12)
20                .overlay(
21                    RoundedRectangle(cornerRadius: 12)
22                        .stroke(Color.gray.opacity(0.25), lineWidth: 1)
23                )
24        }
25    }
26}

This pattern is easier to reuse than scattering styling modifiers across screens.

Older-version workaround

If you need to support older iOS behavior where scrollContentBackground(.hidden) is unavailable, people sometimes fall back to UIKit appearance customization or a wrapped UITextView. That is more invasive, so it should be a compatibility workaround rather than the first choice.

The simplest principle is:

• modern iOS: use scrollContentBackground(.hidden)
• older iOS: consider a UIKit bridge if the default behavior is unacceptable

Background versus container styling

Another useful distinction is between styling the editor itself and styling the container around it.

This sounds minor, but it explains a lot of “why didn't my color change” confusion. In many cases the container is colored correctly, but the internal text surface is still drawing its own default background.

If you put the TextEditor inside another view:

1VStack {
2    Text("Notes")
3    TextEditor(text: $text)
4}
5.padding()
6.background(Color.blue.opacity(0.1))

then you are styling the outer container, not necessarily the text-editing surface. That is perfectly valid if the design only needs a colored card around the editor.

Color choices and readability

Background color changes should be checked against text contrast and placeholder readability. A custom editor background that looks good visually but reduces contrast makes editing harder, especially in light/dark mode transitions.

Prefer semantic colors or carefully chosen palette values when the screen supports multiple appearance modes.

Common Pitfalls

A common mistake is assuming .background(...) alone will recolor the editable region.

Another mistake is styling the outer container and expecting the internal text area to change with it.

A third mistake is hardcoding a background color without checking contrast against text, placeholder, and dark-mode appearance.

Summary

• 'TextEditor background styling is special because of its internal scroll-backed rendering.'
• On iOS 16 and later, use scrollContentBackground(.hidden) first.
• Then apply your custom background color and any border or corner styling.
• Distinguish between coloring the editor itself and coloring its container.
• Check readability and appearance-mode behavior before finalizing the color choice.
• Use the scroll-content approach when the editable region itself must be recolored.