Skip to content

Ansi themes #6513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
willmcgugan merged 19 commits into from
Apr 30, 2026
Merged

Ansi themes #6513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9aea1bc
Better ansi theming
willmcgugan Apr 21, 2026
d2bce92
more ansi styles
willmcgugan Apr 22, 2026
ec81cd3
button styles
willmcgugan Apr 23, 2026
08661f9
command palette tweaks
willmcgugan Apr 24, 2026
f2be721
tooltip background
willmcgugan Apr 26, 2026
59a5b69
content render
willmcgugan Apr 26, 2026
d77d0e7
fix tooltip remove debug
willmcgugan Apr 26, 2026
8df1c8a
tests
willmcgugan Apr 29, 2026
464fdd7
simplify
willmcgugan Apr 29, 2026
1a61778
tree style
willmcgugan Apr 29, 2026
28476f7
button tweak
willmcgugan Apr 29, 2026
a72aa4c
highlight tweak
willmcgugan Apr 30, 2026
c12fd8f
unbolden
willmcgugan Apr 30, 2026
978f86a
simplify
willmcgugan Apr 30, 2026
f4b774a
changelog
willmcgugan Apr 30, 2026
12ef258
bump
willmcgugan Apr 30, 2026
a82be18
theme tweak
willmcgugan Apr 30, 2026
eebf3fc
style tweak
willmcgugan Apr 30, 2026
992eb86
superfluous code
willmcgugan Apr 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).

## [8.2.5] - 2026-04-30

### Added

- Two new themes: "ansi-dark" and "ansi-light" https://github.com/Textualize/textual/pull/6513
- Added an `ansi` value to themes https://github.com/Textualize/textual/pull/6513

### Changed

- `App.ansi_color` may now be `None` to use the `ansi` value from the theme. https://github.com/Textualize/textual/pull/6513

## [8.2.4] - 2026-04-19

### Added
Expand Down Expand Up @@ -3423,6 +3434,7 @@ https://textual.textualize.io/blog/2022/11/08/version-040/#version-040
- New handler system for messages that doesn't require inheritance
- Improved traceback handling

[8.2.5]: https://github.com/Textualize/textual/compare/v8.2.4...v8.2.5
[8.2.4]: https://github.com/Textualize/textual/compare/v8.2.3...v8.2.4
[8.2.3]: https://github.com/Textualize/textual/compare/v8.2.2...v8.2.3
[8.2.2]: https://github.com/Textualize/textual/compare/v8.2.1...v8.2.2
Expand Down
124 changes: 62 additions & 62 deletions docs/guide/design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,19 +123,19 @@ Textual will attempt to generate the other base colors if they're not supplied.

The following table lists each of 11 base colors (as used in CSS) and a description of where they are used by default.

| Color | Description |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `$primary` | The primary color, can be considered the *branding* color. Typically used for titles, and backgrounds for strong emphasis. |
| `$secondary` | An alternative branding color, used for similar purposes as `$primary`, where an app needs to differentiate something from the primary color. |
| `$foreground` | The default text color, which should be legible on `$background`, `$surface`, and `$panel`. |
| `$background` | A color used for the background, where there is no content. Used as the default background color for screens. |
| `$surface` | The default background color of widgets, typically sitting on top of `$background`. |
| `$panel` | A color used to differentiate a part of the UI form the main content. Used sparingly in Textual itself. |
| `$boost` | A color with alpha that can be used to create *layers* on a background. |
| `$warning` | Indicates a warning. Typically used as a background color. `$text-warning` can be used for foreground. |
| `$error` | Indicates an error. Typically used as a background color. `$text-error` can be used for foreground. |
| `$success` | Used to indicate success. Typically used as a background color. `$text-success` can be used for foreground. |
| `$accent` | Used sparingly to draw attention. Typically contrasts with `$primary` and `$secondary`. |
| Color | Description |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `$primary` | The primary color, can be considered the *branding* color. Typically used for titles, and backgrounds for strong emphasis. |
| `$secondary` | An alternative branding color, used for similar purposes as `$primary`, where an app needs to differentiate something from the primary color. |
| `$foreground` | The default text color, which should be legible on `$background`, `$surface`, and `$panel`. |
| `$background` | A color used for the background, where there is no content. Used as the default background color for screens. |
| `$surface` | The default background color of widgets, typically sitting on top of `$background`. |
| `$panel` | A color used to differentiate a part of the UI form the main content. Used sparingly in Textual itself. |
| `$boost` | A color with alpha that can be used to create *layers* on a background. |
| `$warning` | Indicates a warning. Typically used as a background color. `$text-warning` can be used for foreground. |
| `$error` | Indicates an error. Typically used as a background color. `$text-error` can be used for foreground. |
| `$success` | Used to indicate success. Typically used as a background color. `$text-success` can be used for foreground. |
| `$accent` | Used sparingly to draw attention. Typically contrasts with `$primary` and `$secondary`. |

## Shades

Expand Down Expand Up @@ -261,74 +261,74 @@ Here's a comprehensive list of these variables, their purposes, and default valu

### Border

| Variable | Purpose | Default Value |
|----------|---------|---------------|
| `$border` | The border color for focused widgets with a border | `$primary` |
| `$border-blurred` | The border color for unfocused widgets | Slightly darkened `$surface` |
| Variable | Purpose | Default Value |
| ----------------- | -------------------------------------------------- | ---------------------------- |
| `$border` | The border color for focused widgets with a border | `$primary` |
| `$border-blurred` | The border color for unfocused widgets | Slightly darkened `$surface` |

### Cursor

| Variable | Purpose | Default Value |
|----------|---------|---------------|
| `$block-cursor-foreground` | Text color for block cursor (e.g., in OptionList) | `$text` |
| `$block-cursor-background` | Background color for block cursor | `$primary` |
| `$block-cursor-text-style` | Text style for block cursor | `"bold"` |
| `$block-cursor-blurred-foreground` | Text color for unfocused block cursor | `$text` |
| `$block-cursor-blurred-background` | Background color for unfocused block cursor | `$primary` with 30% opacity |
| `$block-cursor-blurred-text-style` | Text style for unfocused block cursor | `"none"` |
| `$block-hover-background` | Background color when hovering over a block | `$boost` with 5% opacity |
| Variable | Purpose | Default Value |
| ---------------------------------- | ------------------------------------------------- | --------------------------- |
| `$block-cursor-foreground` | Text color for block cursor (e.g., in OptionList) | `$text` |
| `$block-cursor-background` | Background color for block cursor | `$primary` |
| `$block-cursor-text-style` | Text style for block cursor | `"bold"` |
| `$block-cursor-blurred-foreground` | Text color for unfocused block cursor | `$text` |
| `$block-cursor-blurred-background` | Background color for unfocused block cursor | `$primary` with 30% opacity |
| `$block-cursor-blurred-text-style` | Text style for unfocused block cursor | `"none"` |
| `$block-hover-background` | Background color when hovering over a block | `$boost` with 5% opacity |

### Input

| Variable | Purpose | Default Value |
|----------|---------|---------------|
| `$input-cursor-background` | Background color of the input cursor | `$foreground` |
| `$input-cursor-foreground` | Text color of the input cursor | `$background` |
| `$input-cursor-text-style` | Text style of the input cursor | `"none"` |
| `$input-selection-background` | Background color of selected text | `$primary-lighten-1` with 40% opacity |
| Variable | Purpose | Default Value |
| ----------------------------- | ------------------------------------ | ------------------------------------- |
| `$input-cursor-background` | Background color of the input cursor | `$foreground` |
| `$input-cursor-foreground` | Text color of the input cursor | `$background` |
| `$input-cursor-text-style` | Text style of the input cursor | `"none"` |
| `$input-selection-background` | Background color of selected text | `$primary-lighten-1` with 40% opacity |

### Scrollbar

| Variable | Purpose | Default Value |
|----------|---------|---------------|
| `$scrollbar` | Color of the scrollbar | `$panel` |
| `$scrollbar-hover` | Color of the scrollbar when hovered | `$panel-lighten-1` |
| `$scrollbar-active` | Color of the scrollbar when active (being dragged) | `$panel-lighten-2` |
| `$scrollbar-background` | Color of the scrollbar track | `$background-darken-1` |
| `$scrollbar-corner-color` | Color of the scrollbar corner | Same as `$scrollbar-background` |
| `$scrollbar-background-hover` | Color of the scrollbar track when hovering over the scrollbar area | Same as `$scrollbar-background` |
| `$scrollbar-background-active` | Color of the scrollbar track when the scrollbar is active | Same as `$scrollbar-background` |
| Variable | Purpose | Default Value |
| ------------------------------ | ------------------------------------------------------------------ | ------------------------------- |
| `$scrollbar` | Color of the scrollbar | `$panel` |
| `$scrollbar-hover` | Color of the scrollbar when hovered | `$panel-lighten-1` |
| `$scrollbar-active` | Color of the scrollbar when active (being dragged) | `$panel-lighten-2` |
| `$scrollbar-background` | Color of the scrollbar track | `$background-darken-1` |
| `$scrollbar-corner-color` | Color of the scrollbar corner | Same as `$scrollbar-background` |
| `$scrollbar-background-hover` | Color of the scrollbar track when hovering over the scrollbar area | Same as `$scrollbar-background` |
| `$scrollbar-background-active` | Color of the scrollbar track when the scrollbar is active | Same as `$scrollbar-background` |

### Links

| Variable | Purpose | Default Value |
|----------|---------|---------------|
| `$link-background` | Background color of links | `"initial"` |
| `$link-background-hover` | Background color of links when hovered | `$primary` |
| `$link-color` | Text color of links | `$text` |
| `$link-style` | Text style of links | `"underline"` |
| `$link-color-hover` | Text color of links when hovered | `$text` |
| `$link-style-hover` | Text style of links when hovered | `"bold not underline"` |
| Variable | Purpose | Default Value |
| ------------------------ | -------------------------------------- | ---------------------- |
| `$link-background` | Background color of links | `"initial"` |
| `$link-background-hover` | Background color of links when hovered | `$primary` |
| `$link-color` | Text color of links | `$text` |
| `$link-style` | Text style of links | `"underline"` |
| `$link-color-hover` | Text color of links when hovered | `$text` |
| `$link-style-hover` | Text style of links when hovered | `"bold not underline"` |

### Footer

| Variable | Purpose | Default Value |
|----------|---------|---------------|
| `$footer-foreground` | Text color in the footer | `$foreground` |
| `$footer-background` | Background color of the footer | `$panel` |
| `$footer-key-foreground` | Text color for key bindings in the footer | `$accent` |
| `$footer-key-background` | Background color for key bindings in the footer | `"transparent"` |
| `$footer-description-foreground` | Text color for descriptions in the footer | `$foreground` |
| Variable | Purpose | Default Value |
| -------------------------------- | ----------------------------------------------- | --------------- |
| `$footer-foreground` | Text color in the footer | `$foreground` |
| `$footer-background` | Background color of the footer | `$panel` |
| `$footer-key-foreground` | Text color for key bindings in the footer | `$accent` |
| `$footer-key-background` | Background color for key bindings in the footer | `"transparent"` |
| `$footer-description-foreground` | Text color for descriptions in the footer | `$foreground` |
| `$footer-description-background` | Background color for descriptions in the footer | `"transparent"` |
| `$footer-item-background` | Background color for items in the footer | `"transparent"` |
| `$footer-item-background` | Background color for items in the footer | `"transparent"` |

### Button

| Variable | Purpose | Default Value |
|----------|---------|---------------|
| `$button-foreground` | Foreground color for standard buttons | `$foreground` |
| `$button-color-foreground` | Foreground color for colored buttons | `$text` |
| `$button-focus-text-style` | Text style for focused buttons | `"bold reverse"` |
| Variable | Purpose | Default Value |
| -------------------------- | ------------------------------------- | ---------------- |
| `$button-foreground` | Foreground color for standard buttons | `$foreground` |
| `$button-color-foreground` | Foreground color for colored buttons | `$text` |
| `$button-focus-text-style` | Text style for focused buttons | `"bold reverse"` |

## App-specific variables

Expand Down
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[tool.poetry]
name = "textual"
version = "8.2.4"
version = "8.2.5"
homepage = "https://github.com/Textualize/textual"
repository = "https://github.com/Textualize/textual"
documentation = "https://textual.textualize.io/"
Expand Down
Loading
Loading