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")
)