Skip to content

Commit

Permalink
Docs updates
Browse files Browse the repository at this point in the history
  • Loading branch information
darrenburns committed Nov 6, 2024
1 parent b3c9089 commit d41f062
Showing 1 changed file with 10 additions and 3 deletions.
13 changes: 10 additions & 3 deletions docs/guide/design.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ Click on the tabs below to see how themes can change the appearance of an app.
```{.textual path="docs/examples/themes/todo_app.py"}
```


=== "gruvbox"

```{.textual path="docs/examples/themes/todo_app.py" press="ctrl+t"}
Expand All @@ -34,7 +33,13 @@ Click on the tabs below to see how themes can change the appearance of an app.

The theme can be changed at runtime via the [Command Palette](./command_palette.md) (++ctrl+p++).

You can also programmatically change the theme by setting the value of `App.theme` to the name of a theme.
You can also programmatically change the theme by setting the value of `App.theme` to the name of a theme:

```python
class MyApp(App):
def on_mount(self) -> None:
self.theme = "nord"
```

A theme must be *registered* before it can be used.
Textual comes with a selection of built-in themes which are registered by default.
Expand Down Expand Up @@ -159,7 +164,7 @@ The available text colors are:

### Ensuring text legibility

In some cases, the background color of a widget is unpredictable, meaning we cannot know in advance which text colors will be legible against it.
In some cases, the background color of a widget is unpredictable, so we cannot be certain our text will be readable against it.

The theme system defines three CSS variables which you can use to ensure that text is legible on any background.

Expand All @@ -183,6 +188,8 @@ For example, `$text-primary` is a version of the `$primary` color tinted to ensu
--8<-- "docs/examples/themes/colored_text.py"
```

These colors are also be guaranteed to be legible when used as the foreground color of a widget with a *muted color* background.

## Muted colors

Muted colors are generated from the base colors by blending them with `$background` at 70% opacity.
Expand Down

0 comments on commit d41f062

Please sign in to comment.