Color – SwiftUI

Color in SwiftUI is an environment-dependent color.

Render color using it.

How to change the background color of the view in SwiftUI

This will set the background of the Text to .red

var body: some View {
       <span class="code-line-container" data-v-6334be62=""><span class="code-line" data-v-6334be62=""> <span class="syntax-type">Text</span>(<span class="syntax-string">"Hello AppMakers.dev visitors"</span>)</span></span> 
        .background(Color.red)            
    }

If you want to set the whole screen to be red, you can do this. This will center the text, and will set the whole view to be red.

var body: some View {
       <span class="code-line-container" data-v-6334be62=""><span class="code-line" data-v-6334be62=""> <span class="syntax-type">HStack{
            Spacer()
        VStack {
            Spacer()
        Text("<span class="syntax-string">Hello AppMakers.dev</span>")
             Spacer()
        }
            Spacer()
        } 
        .background(Color.red)            
    }</span></span></span>

Or use this instead to fill the whole view with red ingoring safe area.

How to change Text Color in SwiftUI

This code will change the text color to green. Use foregroundColor(_:) to set the color that the view uses for foreground elements.

  var body: some View {
        
        Text("Hello")
            .foregroundColor(Color.green)
    } 

How to convert UIColor to SwiftUI Color

To convert UIColor to SwiftUI Color add this extension to your codebase.

How to use Color set from Assets Catalog?

Let’s say you created color named “newColor” in your Assets catalog. To use it, you can do the following:

Color("newColor")

To simplify the usage of the Assets Catalog colors, add this extension to your code:

extension Color {
     static let newColor = Color("newColor")
     static let newColor2 = Color("newColor2")
}

Learn more about SwiftUI using SwiftUI Tutorials by the AppMakers

If anything will change in the future, it is OK, you can always check the official documentation.

Color Documentation

Leave a comment to Submit the NEW and USEFUL code related to the topic of this post.
Submit a brief and useful code only.