1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
# Tint
The `tint` style blends a color with the whole widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
tint: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
--8<-- "docs/snippets/syntax_block_end.md"
The tint style blends a [`<color>`](../css_types/color.md) with the widget. The color should likely have an _alpha_ component (specified directly in the color used or by the optional [`<percentage>`](../css_types/percentage.md)), otherwise the end result will obscure the widget content.
## Example
This examples shows a green tint with gradually increasing alpha.
=== "Output"
```{.textual path="docs/examples/styles/tint.py"}
```
=== "tint.py"
```python hl_lines="13"
--8<-- "docs/examples/styles/tint.py"
```
1. We set the tint to a `Color` instance with varying levels of opacity, set through the method [with_alpha][textual.color.Color.with_alpha].
=== "tint.tcss"
```css
--8<-- "docs/examples/styles/tint.tcss"
```
## CSS
```css
/* A red tint (could indicate an error) */
tint: red 20%;
/* A green tint */
tint: rgba(0, 200, 0, 0.3);
```
## Python
```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)"
```
|
