Transparent Background for TextEditor in SwiftUI

Alex Seifert

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.

davidev

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
    }
}

enter image description here

Collected from the Internet

Please contact javaer1[email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to add placeholder text to TextEditor in SwiftUI?

SwiftUI - Button with transparent background

How to set a navigation bar in clear / transparent background in SwiftUI?

Transparent font on transparent background

SwiftUI - Is there a way to create a read-only TextEditor?

How to ignore SwiftUI modal background, or make modal background clear/transparent?

Change background color of TextEditor in SwiftUI

How to prevent TextEditor from scrolling in SwiftUI?

Transparent Background for SwiftUI Lists -- Behavior Change in iOS14

TextEditor positioning in SwiftUI

TextEditor added / SwiftUi

SwiftUI TextEditor: scrolling to top at text change

How to make background of List cells transparent in SwiftUI?

Issue with transparent images with a transparent background

Android, Background not keeping proportions while writing in TextEditor

SwiftUI: how to make List view transparent? How to change List view background color?

Changing TextEditor background color in SwiftUI for macOS

Show line numbers in macOS SwiftUI TextEditor

Disable selection cursor for TextEditor in macOS-SwiftUI

SwiftUI TextEditor disable editing but keep tapable

Controlling size of TextEditor in SwiftUI

SwiftUI replace and copy text TextEditor

Updating a SwiftUI TextEditor on font change

Detecting keyboard "submit button" press for TextEditor SwiftUI

SwiftUI: How to generate a Map Route with transparent background?

SwiftUI: Having a reusable Header View that has a transparent background?

Connect TextEditor text count to ProgressView in SwiftUI

Background color not change TextEditor view

How to make SwiftUI TabBar background always transparent