SwiftUI - How do I change the background color of a View

Question

I m beginning to try out SwiftUI and I m surprised that it doesn t seem to be straightforward to change the background color of a View  How do you do this using SwiftUI

User · Answer

I like to declare a modifier for changing the background color of a view.

extension View {
  func background(with color: Color) -> some View {
    background(GeometryReader { geometry in
      Rectangle().path(in: geometry.frame(in: .local)).foregroundColor(color)
    })
  }
}

Then I use the modifier by passing in a color to a view.

struct Content: View {

  var body: some View {
    Text("Foreground Label").foregroundColor(.green).background(with: .black)
  }

}

User · Answer

Would this solution work    add following line to SceneDelegate                   window rootViewController  view backgroundColor    black  func scene   scene  UIScene  willConnectTo session  UISceneSession  options connectionOptions  UIScene ConnectionOptions            if let windowScene   scene as  UIWindowScene                    window rootViewController  view backgroundColor    black

User · Answer

You can Simply Change Background Color of a View   var body   some View        VStack           Color blue edgesIgnoringSafeArea  all               and You can also use ZStack    var body   some View        ZStack           Color blue edgesIgnoringSafeArea  all

User · Answer

NavigationView Example  var body  some View       var body  some View           NavigationView               ZStack                      Background                 Color blue edgesIgnoringSafeArea  all                   content                              navigationTitle Constants navigationTitle                 navigationBarItems leading  cancelButton  trailing  doneButton                 navigationViewStyle StackNavigationViewStyle                       var content  some View          your content here  List  VStack etc - whatever you want     VStack          Text  quot Hello World quot

User · Answer

You can do something like    background Color black    around your view    eg  from the default template  I am encompassing it around a Group        var body  some View           VStack             Text  Hello SwiftUI                      background Color black          To add some opacity to it  you can add the  opacity method as well    background Color black opacity 0 5     You can also make use of the inspect element of the view by CMD   click on the View and clicking Show SwiftUI Inspector   Background   Your Color

User · Answer

Several possibilities    SwiftUI   Xcode 11   1     background Color black    for system colors  2   background Color  green      for colors you created in Assets xcassets   Otherwise you can do Command Click on the element and change it from there     Hope it help

User · Answer

For List  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                var body  some View           List               Section header  Text  quot First Section quot                      Text  quot First Cell quot                             Section header  Text  quot Second Section quot                      Text  quot First Cell quot                                    background Color yellow           Now you can use Any background  including all Colors  you want  Also First look at this result   As you can see  you can set the color of each element in the View hierarchy like this  struct ContentView  View            init            UINavigationBar appearance   backgroundColor    green            For other NavigationBar changes  look here  https   stackoverflow com a 57509555 5623035             var body  some View           ZStack               Color yellow             NavigationView                   ZStack                       Color blue                     Text  quot Some text quot                                   background Color red                     And the first one is window  window backgroundColor    magenta  The very common issue is we can not remove the background color of SwiftUI s HostingViewController  yet   so we can t see some of the views like navigationView through the views hierarchy  You should wait for the API or try to fake those views  not recommended

User · Answer

Screen s Background Color  As of Xcode Version 12  I m not sure if the original poster meant the background color of the entire screen or of individual views  So I ll just add this answer which is to set the entire screen s background color  Using ZStack var body  some View       ZStack               Color purple                  ignoresSafeArea                               Your other content here                Other layers will respect the safe area edges          I added  ignoresSafeArea   otherwise  it will stop at safe area margins  Using Overlay Modifier var body  some View       Color purple          ignoresSafeArea  vertical     Ignore just for the color          overlay              VStack spacing  20                    Text  quot Overlay quot   font  largeTitle                  Text  quot Example quot   font  title  foregroundColor  white                Note  It s important to keep the  ignoresSafeArea on just the color so your main content isn t ignoring the safe area edges too

User · Answer

Use Below Code for Navigation Bar Color Customization  struct ContentView  View     State var msg    Hello SwiftUI  init         UINavigationBar appearance   backgroundColor    systemPink       UINavigationBar appearance   largeTitleTextAttributes              foregroundColor  UIColor white                  font   UIFont name  Helvetica Neue   size  40            3      UINavigationBar appearance   titleTextAttributes              font   UIFont name   HelveticaNeue-Thin   size  20       var body  some View       NavigationView       Text msg           navigationBarTitle Text  NAVIGATION BAR

User · Answer

Fill the entire screen var body   some View      Color green edgesIgnoringSafeArea  all

User · Answer

Xcode 11 5 Simply use ZStack to add background color or images to your main view in SwiftUI struct ContentView  View       var body  some View           ZStack               Color black                    edgesIgnoringSafeArea  vertical

User · Answer

The code on Scene delegate in Swift UI  Content view background-color     window rootViewController  view backgroundColor    lightGray

User · Answer

like this   struct ContentView   View        State var fullName  String    yushuyi      var body  some View                   VStack                               TextField  fullName  background SwiftUI Color red                  Spacer             background SwiftUI Color yellow edgesIgnoringSafeArea  all

[view] SwiftUI - How do I change the background color of a View?

Examples related to view

Examples related to background

Examples related to background-color

Examples related to modifier

Examples related to swiftui