Xcode has the ability to embed colors and images directly in code. This is done with the help of Color Literals and Image Literals.


To follow this tutorial, you can download the source file, which will help you compare your progress.

Color Literal

A color literal allows you to select colors using a color picker directly from your code. You can either select a color or type in the HEX code. You can also set the opacity.
Note: Color literals are great for static colors. For colors that adapt to dark mode, I suggest using colors in the Assets Catalog.
Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1))

Image Literal

Similar to color literals, image literals opens up a GUI from where you can select all the images in your Assets Catalog.
You can download stock images from Unsplash.
Image(uiImage: #imageLiteral(resourceName: "YOUR-IMAGE"))

Final Layout

In the final layout, you can quickly change the color of the title and the card’s background image.
VStack {
    Text("Color literal")
        .foregroundColor(Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
.frame(width: 300, height: 200)
.background(Image(uiImage: #imageLiteral(resourceName: "gradienta-ix_kUDzCczo-unsplash")).resizable().aspectRatio(contentMode: .fill))
Would love your thoughts, please comment.x