Color¶
The color
style sets the text color of a widget.
Syntax¶
color: (<color> | auto) [<percentage>];
The color
style requires a <color>
followed by an optional <percentage>
to specify the color's opacity.
You can also use the special value of "auto"
in place of a color. This tells Textual to automatically select either white or black text for best contrast against the background.
Examples¶
Basic usage¶
This example sets a different text color for each of three different widgets.
Auto¶
The next example shows how auto
chooses between a lighter or a darker text color to increase the contrast and improve readability.
from textual.app import App
from textual.widgets import Label
class ColorApp(App):
def compose(self):
yield Label("The quick brown fox jumps over the lazy dog!", id="lbl1")
yield Label("The quick brown fox jumps over the lazy dog!", id="lbl2")
yield Label("The quick brown fox jumps over the lazy dog!", id="lbl3")
yield Label("The quick brown fox jumps over the lazy dog!", id="lbl4")
yield Label("The quick brown fox jumps over the lazy dog!", id="lbl5")
app = ColorApp(css_path="color_auto.tcss")
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¶
background
to set the background color in a widget.