Color

A Color view is a way to incorporate colors into the user interface. It can be used to modify the backgrounds.

Syntax

var body: some View {
    Color.color-example
    //Content that is being modified
        .foregroundColor(.color-example) //Modifier
}

• Color.color-example changes the background color.
• .foregroundColor(.color-example) changes the color of the content (ex: “text”) itself.

Example

The following example changes the colors to white on black:

var body: some View {
  VStack {
    Color.black
      .overlay(
          Text("Codecademy__")
            .foregroundColor(.white)
            )
      }
  .padding()
  }

to clipboard
Copy to clipboard

• Color.black makes the background color black.
• foregroundColor(.white) sets the text color to white.

The code-block above will display an interface filled with the color black and the text “Codecademy” in white.