mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
52 lines
835 B
Markdown
52 lines
835 B
Markdown
# 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.
|
|
|
|
=== "tint.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/tint.py"
|
|
```
|
|
|
|
=== "tint.css"
|
|
|
|
```css
|
|
--8<-- "docs/examples/styles/tint.css"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/tint.py"}
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* 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):
|
|
```
|