Transparent Background for TextEditor in SwiftUI

Question

I am using SwiftUI to build an app for iOS, iPadOS and macOS and I need a TextEditor with a transparent background.

This question has been asked before and I found a good answer for iOS/iPadOS (Change background color of TextEditor in SwiftUI), but none for macOS.

This is the code I have based on the link above that works perfectly for iOS and iPadOS:

TextEditor(text: $text)
  .foregroundColor(.black)
  .onAppear {
      #if os(macOS)
      // ??
      #else
      UITextView.appearance().backgroundColor = .clear
      #endif
  }

NSTextView doesn't appear to have an equivalent to UITextView.appearance(), so I'm not entirely sure what to do there.

Using .background(Color.clear) also doesn't work:

TextEditor(text: $text)
  .foregroundColor(.black)
  .background(Color.clear)
  .onAppear {
      #if os(macOS)
      // ??
      #else
      UITextView.appearance().backgroundColor = .clear
      #endif
  }

Does anyone know of a way to get a transparent background for a TextEditor on macOS?

Also, this question has already been asked specifically about macOS here: Changing TextEditor background color in SwiftUI for macOS, but no answer that works given.

Zosema

Answer 1

Here is a possible work around for this. The extension sets all of your TextViews background to .clear and then you are able to change the background color with .background() modifier.

import SwiftUI

extension NSTextView {
    open override var frame: CGRect {
        didSet {
            backgroundColor = .clear //<<here clear
            drawsBackground = true
        }

    }
}

struct ContentView: View {
    
    @State var string: String = ""
    
    var body: some View {
        TextEditor(text: $string)
            .textFieldStyle(PlainTextFieldStyle())
            .background(Color.red) //<< here red
    }
}

Murder

Bacon saver! This is the best solution thus far if you need pre-iOS 16 / pre-macOS 13 support. – Manrope

Is there a similar solution for UITextView? I tried it, but there is no drawsBackground property for UITextView. And without it, it shows the correct color when the input field appears, but after the user types some text, the color resets to white. – Optimal

Answer 2

As of Jan. 26, 2024 I couldn't get the accepted answer to work.

When I added the extension code I always got an error that NSTextView was not in scope:

Cannot find type 'NSTextView' in scope

However, I stumbled upon a (possibly) easier way to set the TextEditor background color.

I just did two things:

1. I set the Opacity of the control to 0.8. .opacity(0.8)
2. I set the background to the color I wanted .background(Color.blue)

My final code looked something like this:

TextEditor(text: Binding(get: { userTask.note ?? "" }) {
            userTask.note = $0
        })
        .opacity(0.8)
        .background(Color.blue)

Here's what it looks like:

Mute