1.9 KiB
Color
The color rule sets the text color of a widget.
Syntax
--8<-- "docs/snippets/syntax_block_start.md" color: (<color> | auto) [<percentage>]; --8<-- "docs/snippets/syntax_block_end.md"
The style color needs a <color> followed by an optional <percentage> to specify the color transparency.
Instead of a <color>, one can use the special value "auto" to choose automatically the color with the best contrast for readability purposes.
Examples
Basic usage
This example sets a different text color for each of three different widgets.
=== "Output"
```{.textual path="docs/examples/styles/color.py"}
```
=== "color.py"
```python
--8<-- "docs/examples/styles/color.py"
```
=== "color.css"
```sass hl_lines="8 12 16"
--8<-- "docs/examples/styles/color.css"
```
Auto
The next example shows how auto chooses between a lighter or a darker text color to increase the contrast and improve readability.
=== "Output"
```{.textual path="docs/examples/styles/color_auto.py"}
```
=== "color_auto.py"
```py
--8<-- "docs/examples/styles/color_auto.py"
```
=== "color_auto.css"
```sass hl_lines="2"
--8<-- "docs/examples/styles/color_auto.css"
```
CSS
/* Blue text */
color: blue;
/* 20% red text */
color: red 20%;
/* RGB color */
color: rgb(100, 120, 200);
/* Automatically choose color with suitable contrast for readability */
color: auto;
Python
You can use the same syntax as CSS, or explicitly set a Color object.
# Set blue text
widget.styles.color = "blue"
from textual.color import Color
# Set with a color object
widget.styles.color = Color.parse("pink")
See also
backgroundto set the background color in a widget.