Custom CSS that Will Apply Per Palette

#1

I’ve done a bit of webdev tools Inspect’s to see if the current palette shows up in html tags, so that I can use that to only apply a set of .css entries to a specific palette. But I don’t see any.

Has anyone worked out a means of only applying a set of custom .css if a specific palette is active?

Thank you!

#2

You can use a $list widget in your custom stylesheet tiddler (tagged with $:/tags/Stylesheet) to test the current value contained in the $:/palette tiddler, like this:

<$list filter="[{$:/palette}match[SomePaletteTitle]]">
   ... your palette-specific CSS here ...
</$list>

Note that if no specific palette has been chosen, the $:/palette tiddler does not exist.
Thus, to apply custom styles for the default palette ($:/palettes/Vanilla), you would need to write:

<$list filter="[[$:/palette]is[missing]] ~[{$:/palette}match[$:/palettes/Vanilla]]">
   ... your palette-specific CSS here ...
</$list>

enjoy,
-e

5 Likes
#3

Thank you for that! It works - if I use the full name of the palette, in my case:
$:/palettes/Darkworld

I MIGHT play around so I can use JUST the name: Darkworld.

But this gets me going. Thank you!

#4

Try this filter:

<$list filter="[{$:/palette}trim:prefix[$:/palettes/]match[Darkworld]]">
   ... your palette-specific CSS here ...
</$list>

-e

2 Likes
#5

Perfect! Thank you. That’s a bit cleaner! Now to craft some crazy CSS. :slight_smile: