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()
}
  • 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.

Color

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn SwiftUI on Codecademy