Investigate more Textual-friendly colouring and theming

[davep]

Introduction

As indirectly pointed out in Textualize/textual#3532 -- some (all?) of the default themes in Plotext use "ANSI colors", and as such won't always look the same in all terminals. While likely fine and desirable when working on the command line, within a Textual application you probably want consistency across the board.

With this issue I'll investigate what options there are for better colouring while plotting within a Textual application, and also map out which of the themes that come with Plotext work with Textual and which don't look so good.

In doing this I'll also ensure that the best out-of-the-box options are used when it comes to light/dark mode and the auto-theme support.

Plotext themes

Out of the box, Plotext has 16 defined themes. Some seem to be using "ANSI colours", some seem to blend better with a Textual application. Below is a table of the themes, in here I'll try and figure out which ones are "Textual-friendly" and which aren't.

Name	Light or Dark	Textual-friendly
default	Light	No
clear	Both	Yes
pro	Both	Yes
matrix	Dark	No
windows	Dark	No
dark	Dark	No
retro	Dark	Yes
elegant	Both	No
mature	Both	Yes
dreamland	Both	No
grandpa	Both	Yes
salad	Both	Yes
girly	Both	No
serious	Dark	Yes
sahara	Both	No
scream	Both	Yes

Note that, initially, the "Textual-friendly" column is talking more about the general colours than every specific colour. I'll do a deeper dive into the individual themes once I've got a good overview of this. This was also initially tested by having two different terminals side-by-side, with one having all the "ANSI colours" configured to be black, to try and tease out which theme had an overall problem and which didn't. If in the "black" terminal a significant element of the plot turned black, that was assumed to be an "ANSI colour".

Also note: light/dark-friendly is a bit of a judgement call; most of the themes are so far removed from "normal" Textual application theming that they equally clash in light and dark mode so will be marked as "Both".

[davep]

Theme makeup

Themes in plotext are made up of a list that comprises:

1. The canvas colour
2. The axes colour
3. The ticks colour
4. The ticks style (actually not sure what the difference is been colour and style here)
5. A sequence of colours that will be used for each subsequent collection of data plotted.

The colours can be a single integer, an RGB tuple or a colour name.

[davep]

Initial plan

Default themes

The first thing I've done is make auto-changing of dark/light themes in the widget off by default, and the default theme has been seen to one that is mostly "no color", so that the underlying Textual colours will be used. This will give a far better experience out of the box. For example, the original weather example looks like this:

and now it will look like this:

Custom Textual themes

Following on from the above, I'll look at each of the themes that Plotext provides, and add in textual- prefixed versions that won't use any ANSI colours. While these won't in many cases be responsive to dark/light mode changes, they will keep the same colours no matter the terminal.

[davep]

Now at a point where all of the themes have RGB equivalents, and the out-of-the-box styling is much improved. I've also created a tool to help explore and view the themes.

Screen.Recording.2023-10-24.at.15.24.09.mov

Couple of things I still want to figure out are: why is it that some of the Plotext themes have more colour sequence options than others?

>>> [len(t[-1]) for t in themes.values()]
[19, 19, 19, 22, 23, 21, 22, 22, 22, 22, 22, 22, 20, 22, 22, 22]

And also, given that the theme explorer I've put together only emits 19 "plots", why is it that the last 3 in the textual-design-* themes all appear to be in the "default" colour¹ when only the last one is "default"?

I suspect there's an issue with some of the Plotext colour mapping, and I'm borrowing colours from other themes. As such a wee dip into what the results are is in order; although I think the best bet here, for the textual-design-* themes, is to hand-pick a good range of colours that work in context.

Footnotes

1. I have discovered that plotext doesn't rotate through the sequence; instead if it runs out of colours (as in: there are more plots than there are colours in the sequence) it just sticks with the last one. ↩

[davep]

It looks like the oddness towards the end of the sequence is simply down to some strange choices in Plotext itself. With this in mind, for the textual-design themes, I've picked out a more unique set that should work well in dark and light mode. Still up for a wee bit more tinkering but I think it's a much nicer place to start from.

I sense there's a couple of changes to make still so it's going to really work out for light mode:

and that can either be done to the core sequence, or I can fork the light sequence off from the dark and tweak it from there. Note that I am using this same sequence for textual-default and textual-pro (the RGB-friendly takes on the Plotext themes) so that will need to be taken into account.

Actually, having textual-design-dark and textial-design-light does sort of render that moot.

A bit more tinkering with this tomorrow but I think it's more or less there.

[davep]

Out of the box the weather example now looks like this: