Palette: Editor toolbar buttons backgound in palette

#1

Hi, i’m making a color palette, but I can’t find the name that identifies the backgound of the editor toolbar buttons (bold, italic… those ones).
Can anyone tell me what it is? I have not found it in other palettes or online. (or if there was any documentation on the subject you could point me to that would be great)

#2

Try this:

First, we need to figure out where the current background color comes from:

  1. Open any tiddler for editing
  2. Right-click on any editor toolbar button and select “inspect” to open the browser debugger
  3. In the debugger, highlight the button element for the button you clicked on.
  4. In the Styles sidebar info display, the button has styles for the .tc-editor-toolbar button class
  5. Note that this class has background-color: #cccccc;

Then, we need to figure out where this color is defined:

  1. In $:/AdvancedSearch > Shadows, search for “tc-editor-toolbar button”
  2. The results will list the $:/themes/tiddlywiki/vanilla/base shadow tiddler
  3. View this shadow tiddler and use your browser’s text search to find “tc-editor-toolbar button”
  4. This will find a CSS rule that includes background-color: <<colour tiddler-controls-foreground>>;

Thus, in your palette definition, the color you assign to “tiddler-controls-foreground” will be applied to the background of the editor toolbar buttons.

HOWEVER… setting this palette color will also affect the foreground color for all other tiddler controls, so it’s not specific enough for your purposes :frowning:

But, all is not lost! You can add a new palette item definition, and then appy it using a custom stylesheet:

  1. Manually edit your palette definition tiddler and add a line like this:
    editor-toolbar-button-background:
  2. Create a tiddler (e.g., “MyStyles”), tagged with $:/tags/Stylesheet, containing:
    .tc-editor-toolbar button { background:<<colour editor-toolbar-button-background>>; }
  3. You can then use the TWCore $:/PaletteManager interface to select your palette and set the editor-toolbar-button-background item to whatever color you like.

Let me know how it goes…

enjoy,
-e

1 Like
#3

Thanks for the explanation, really well done. Using the inspect tool was something I hadn’t thought of when creating the palette, and it’s helping me a lot, that’s handy. And your proposed solution works, thanks!

#4

@SnapSam do share the palette in the forum once it is ready

#5

I don’t know if it’s worth it, it’s just a slightly different version of $:/palettes/GruvboxDark.
I started from that palette. If I’ll make more interesting ones in the future, I will share them for sure

#6

@SnapSam
I have created a dark palette recently based the colours used in discord app’s dark mode. Here is the link. I created it using palette manager by @pmario

1 Like