added color reference and docs

This commit is contained in:
Will McGugan
2022-09-10 22:00:51 +01:00
parent b1fa3c0a2a
commit b6341ddb50
10 changed files with 161 additions and 126 deletions

View File

@@ -5,7 +5,7 @@ Textual provides a large number of *styles* you can use to customize how your ap
## Styles object
Every widget class in Textual provides a `styles` object which contains a number of writable attributes. Styles define the position and size of a widget, in addition to color, text style, borders, alignment and much more.
Every widget class in Textual provides a `styles` object which contains a number of writable attributes. You can write to any of these attributes and Textual will update the screen accordingly.
Let's look at a simple example which sets the styles on the `screen` (a special widget that represents the screen).
@@ -13,13 +13,21 @@ Let's look at a simple example which sets the styles on the `screen` (a special
--8<-- "docs/examples/guide/styles/screen.py"
```
The first line sets `screen.styles.background` to `"darkblue"` which will change the background color to dark blue. There are a few other ways of setting color which we will explore later.
The first line sets [background](../styles/background.md) to `"darkblue"` which will change the background color to dark blue. There are a few other ways of setting color which we will explore later.
The second line sets `screen.styles.border` to a tuple of `("heavy", "white")` which tells Textual to draw a white border with a style of `"heavy"`. Running this code will show the following:
The second line sets [border](../styles/border.md) to a tuple of `("heavy", "white")` which tells Textual to draw a white border with a style of `"heavy"`. Running this code will show the following:
```{.textual path="docs/examples/guide/styles/screen.py"}
```
## Colors
The [color](../styles/color.md) property set the color of text on a widget. The [background](..styles/background/md) property sets the color of the background (under the text).
## Box Model
@@ -29,7 +37,6 @@ The second line sets `screen.styles.border` to a tuple of `("heavy", "white")` w
TODO: Styles docs
- What are styles