Skip to content

Tint

The tint rule blends a color with the widget. The color should likely have an alpha component, or the end result would obscure the widget content.

Syntax

tint: <COLOR> [<PERCENTAGE>];

Example

This examples shows a green tint with gradually increasing alpha.

from textual.app import App
from textual.color import Color
from textual.widgets import Static


class TintApp(App):
    def compose(self):
        color = Color.parse("green")
        for tint_alpha in range(0, 101, 10):
            widget = Static(f"tint: green {tint_alpha}%;")
            widget.styles.tint = color.with_alpha(tint_alpha / 100)
            yield widget


app = TintApp(css_path="tint.css")
Static {             
    height: 3;
    text-style: bold;
    background: white;        
    color: black;   
    content-align: center middle; 
}

TintApp tint: green 0%; tint: green 10%; tint: green 20%; tint: green 30%; tint: green 40%; tint: green 50%; ▄▄ tint: green 60%; tint: green 70%;

CSS

/* A red tint (could indicate an error) */
tint: red 20%

/* A green tint */
tint: rgba(0, 200, 0, 0.3);

Python

# A red tint
from textual.color import Color
widget.styles.tint = Color.parse("red").with_alpha(0.2);

# A green tint
widget.styles.tint = "rgba(0, 200, 0, 0.3):