tint

.tint(color: Color): Component

color

Color

required

The tint color to apply to interactive controls such as buttons, toggles, and links.

Support

Button("Delete", () => {})
    .tint(Color("red"))

const body = () => {
    const [isOn, setIsOn] = useState(false)
    return Toggle("Dark Mode", { isOn, setIsOn })
        .tint(Color("purple"))
}

Apply tint to a parent container to affect all interactive children.

VStack([
    Button("Primary Action", () => {}),
    Button("Secondary Action", () => {}),
]).tint(Color("orange"))

.tint() affects the accent color of interactive controls, not the text color. Use .foregroundStyle() to change text or shape fill colors.
Tint propagates to child components through the environment.