Colorify the List Widget Output

[Mohammad]

How list tiddlers in color from a predefined set of colors and loop in color set?

• Assume you have a set of four colors: red, green, blue, yellow
• Next you have a $list which filters all tiddlers tagged with for example Learning

Now, I wish the $list shows the results in color selected from the above four colors and cycle through them. So, the first result is red, the second is green,… fifth is red again, sixth is green, seven result is blue, … and so on

I am looking for a simple general solution! I may have 8 colors or more!
Please share your solutions!

[Mohammad]

This is my first (ugly one) solution

(Only works in TW 5.2.0+)

1. got to https://tiddlywiki.com/prerelease
2. create a new tiddler
3. put the below script into your new tiddle

\define numcolors() 3
\define color-set() 1:red 2:green 3:blue
\define cstyle() color:$(color)$


<$list filter="[tag[Learning]]" counter=id>
<$vars num={{{ [<id>remainder<numcolors>] }}}>
<$vars colorid={{{[<num>match[0]then<numcolors>else<num>] }}}>
<$vars color={{{ [enlist<color-set>prefix<colorid>removeprefix<colorid>removeprefix[:]] }}}>
<span style=<<cstyle>> ><$text text=<<currentTiddler>>/></span><br>
</$vars> 
</$vars> 
</$vars> 
</$list>

4. save and see the results

[Mohammad]

• This is for 10 colors (I borrowed the color set from Python Matplotlib colors)
• I used hex color code this time

NOTE: The solution uses counter attribute for $list widget which is only available in TW 5.2.0

\define numcolors() 10
\define color-set() 1:#1f77b4 2:#ff7f0e 3:2ca02c 4:#d62728 5:#9467bd 6:#8c564b 7:#e377c2 8:#7f7f7f 9:#bcbd22 10:#17becf
\define cstyle() color:$(color)$


<$list filter="[tag[Learning]]" counter=id>
<$vars num={{{ [<id>remainder<numcolors>] }}}>
<$vars colorid={{{[<num>match[0]then<numcolors>else<num>] }}}>
<$vars color={{{ [enlist<color-set>prefix<colorid>removeprefix<colorid>removeprefix[:]] }}}>
<span style=<<cstyle>> ><$text text=<<currentTiddler>>/></span><br>
</$vars> 
</$vars> 
</$vars> 
</$list>

Partial results

[EricShulman]

Here’s my solution that works in TW5.1.23:

\define colorList(filter,colors)
<$vars numcolors={{{ $colors$ +[count[]] }}}>
<$list filter="$filter$">
   <$vars id={{{ $filter$ +[allbefore:include<currentTiddler>count[]] }}}>
   <$vars colorid={{{ [<id>subtract[1]remainder<numcolors>add[1]] }}}>
   <span style={{{ $colors$ +[nth<colorid>addprefix[color:]] }}}>
      <$text text=<<currentTiddler>>/><br>
   </span>
   </$vars>
   </$vars>
</$list>
\end

<<colorList "[tag[Learning]]" "red green blue yellow">>

Note that <$vars id=...> is equivalent to the counter=id syntax, without requiring TW5.2.0

enjoy,
-e

[Alvaro]

You can use colors HSL and play with them.
In first step you can change de hue (H), you can have, for example, steps of 30. from 0 to 330 (360=0) then you have 12 colors. If you need more color you can use short step(15, 10) and play with lightness (L) and sometimes (S) saturation.

[Mohammad]

Thanks Eric! Small and smart!

[Mohammad]

Hi Alvaro, good approach! Could you please give a small example! or the pseudo code!
Do you mean, we should use counter to step through colors?

[TW_Tones]

I think color cycles can look good but why waste the colour dimension when it can share something about the item like status, size or age?

[Alvaro]

Basic idea is something like the following code, you have to change the filter in the list widget. I’ve reused your code.

\define cstyle() color: hsl($(hue)$, $(sat)$%, $(L)$%)

<$list filter="[tag[Filter Operators]]" counter=num>
<$vars hue={{{ [<num>subtract[1]multiply[30]] }}} 
sat={{{ [<num>remainder[24]compare:integer:gt[11]then[40]else[100]] }}}
L={{{ [<num>remainder[24]compare:integer:gt[11]then[35]else[50]] }}} >
<span style=<<cstyle>> ><$text text=<<currentTiddler>>/></span><br>
</$vars>
</$list>

You can do more complex combinations of colors playing with other filter operators. I’ve only used step of 30.

Offtopic: This idea isn’t new, some time ago i though about something like this to be used when we create new tags. But it was one of other ideas to work which I never started.

[Mohammad]

I did not get the logic behind those numbers (30, 24, 40, …)! but works great! and cycle every 24 colors!

[Alvaro]

• 30 is a choice to use color wheel, 360/30= 12 colors and it gives a “distinguishable” color sequence. A bigger number gives small sequence of color but with less colors, and a smaller number gives more colors but they are worse distinguishable.

• 24 because is the double of 12 (our number of colors) ant then create a secuence of 12*2 number with remain[24] (1,2,…,22,23,0).

• 11 to split the sequence in two equal parts (12 & 12) to apply a different values of saturation and lightness.

• 40 and 35 are a random choice to change sat an L in our 12 colour. for example red i hsl is hue=0, sat=100%, lightnes=50% (the else values).

You can play sequence of colors and sequence of number and the number of parts of sequence number to create different “palettes”. And You can also add more complexity using other filter operators.

[Mohammad]

Thank you @Alvaro. I got how it works now!

[TW_Tones]

@Alvaro this could be re-witten as a macro which one supplies N and it returns the color number; eg;
<span style=<<cycle-colour N>>
where cycle-colour reads “color: colornumber;”

Needs testing. may be better as returning 'style=“color: colornumber;” because I think you can use multiple “style=” in html.

[Alvaro]

@TW_Tones

this could be re-witten as a macro

Yes, It is just a code snippet and anyone can convert it in a smart snippet (=macro).

@TW_Tones

you can use multiple “style=” in html.

multiple style attributes?
You can do it with something in one with something like this

\define cstyle() color: red;
\define bgc() background-color:yellow;
<span style={{{ [<cstyle>] [<bgc>] +[join[ ]] }}} >Dummy text</span>

[CodaCoder]

@TW_Tones

because I think you can use multiple “style=” in html

It’s true, you can have multiple style attributes. But you end up with just the last one:

[TW_Tones]

Then there is use a “class, but override it with a style”?

[CodaCoder]

Not quite sure what you’re asking, Tony. Maybe this helps?

Here’s how to override using CSS !important (usually not a good idea) which always “wins”. No matter how high I raise the specificity of the last css rule, the first one (with !important) wins:

So, if your question is asking does style override class? Answer: depends

[CodaCoder]

More here:

https://specificity.keegan.st

[TW_Tones]

Perhaps it depends, but depends on what, the only cause of apparent complexity comes from the use of !Important in the class, all the training says “important, do not use !important” and this is a simple example why not.