The problem is not due to a startup timing issue (i.e, the availability of the $:/info/darkmode or apply-dark-or-light-mode tiddlers). Rather, it is a basic syntax problem with your usage:
In your apply-light-or-dark-mode startup tiddler, you use <$let apply-mode={{dark-or-light-mode}}> to retrieve the desired palette name, where the contents of the dark-or-light-mode tiddler uses the %if...%else%...%endif% conditional syntax to determine the palette name.
The problem is that your $let assignment simply transcludes the conditional syntax into the apply-mode variable… it does NOT evaluate that syntax. In addition, the subsequent reference to <<apply-mode>> also does not evaluate the syntax. As a result, the contents of $:/palette are set to the literal %if...%else%...%endif% syntax retrieved from dark-or-light-mode, and not the desired palette name as you had intended.
Then, when the tag-pill-inner macro (part of the <<tag>> macro) is invoked to display tags in tiddlers, it tries to get the tag pill color value using the current $:/palette value (which, as noted above, does not contain an actual palette name). Thus, the tag-pill-inner parameters that are supposed to transclude index values from the palette (e.g., {{$:/palettes/ContrastDark##tag-background}}) are corrupted because the $:/palette tiddler content isn’t a valid palette tiddler name.
Then, there is also a subtle issue with the “broken” output that you are seeing, because when the corrupted tag-pill-inner parameters are displayed, the $:/palette tiddler’s value (i.e., the conditional syntax) is rendered, so it appears to show the desired palette tiddler title.
As you’ve discovered, the correct way to retrieve the desired palette name is to use “filtered transclusion” to apply the conditional logic, which DOES get evaluated to resolve to a palette name. Thus, in your apply-light-or-dark-mode tiddler you can write:
<$let apply-mode={{{ [{$:/info/darkmode}match[yes]then[$:/palettes/ContrastDark]else[$:/palettes/Vanilla]] }}}>
<$action-setfield $tiddler="$:/palette" $value=<<apply-mode>> $timestamp="no"/>
</$let>
You can also make this more configurable by creating two separate tiddlers (e.g., “light-mode-palette” and “dark-mode-palette”) whose contents each specify their desired palette name. Then, in your apply-light-or-dark-mode tiddler you can write:
<$let apply-mode={{{ [{$:/info/darkmode}match[yes]then{dark-mode-palette}else{light-mode-palette}] }}}>
<$action-setfield $tiddler="$:/palette" $value=<<apply-mode>> $timestamp="no"/>
</$let>
You can even go just a little bit further and create an interface tiddler (e.g., “ChoosePalettes”) for interactively selecting the desired palettes, like this:
\procedure selectpalette(tid)
<<tid>>:
<$select tiddler=<<tid>>>
<$list filter="[all[tiddler+shadows]prefix[$:/palettes]]">
<option><<currentTiddler>></option>
</$list>
</$select>
\end
<<selectpalette light-mode-palette>>
<<selectpalette dark-mode-palette>>
enjoy,
-e
