Skip to main content
Version: 1.6.0

Text Customization

Change Foreground Color​

You can change the color of the text using the .foregroundColor() property.

return ( 
    VStack( 
        VStack( 
            Text("Hello World!").foregroundColor(Color.blue),
            Text("Hello World!").foregroundColor("blue"),
            Text("Hello World!").foregroundColor("#0000ff"),
            Text("Hello World!").foregroundColor("rgb(0, 0, 255)"),
            Text("Hello World!").foregroundColor("hsl(240, 100%, 50%)")
        )
    ) 
)

Tuval UI Playground

Change Background Color​

You can change the background color of the text using the .backgroundColor() property.

VStack( 
    VStack({spacing:10})( 
        Text("Hello World!").backgroundColor("blue").foregroundColor("white"),
        Text("Hello World!").backgroundColor("#0000ff").foregroundColor("white"),
        Text("Hello World!").backgroundColor("rgb(0, 0, 255)").foregroundColor("white"),
        Text("Hello World!").backgroundColor("hsl(240, 100%, 50%)").foregroundColor("white"),
    )
)

Tuval UI Playground

Text Rotation​

You can set the rotation of the texts

VStack( 
    Text("Hello World!").rotate("90deg")
)