How to increase the contrast for the pagecontrol buttons in the menubar

#1

https://sidetabs-wiki.tiddlyhost.com - In this wiki, I am using menubar plug-in. The pagecontrol buttons in the menubar are too light in colour when light color palettes are used and hence difficult to see. Is there any way to increase the contrast so that the buttons are better seen.

image
image2080×68 6.67 KB

Press on this button image to cycle through different palettes.

#2

Hello @arunnbabu81! It seems your menubar stylesheet has gotten modified away from the shadow version, so that the menubar is always the same color as the general page background:

nav.tc-menubar ul.tc-menubar-list {
	background: <<colour page-background>>;
}

OK, if you like that change, then you should probably also change the css here:

nav.tc-menubar li.tc-menubar-item svg {
	fill: <<colour menubar-foreground>>;
}

… because that menubar-foreground value, in every palette, is presumed to be against the usual darker menubar, not against the page-background color you’ve assigned to the menubar.

If you change the second of these to <<colour primary>> (or something like that) then – as long as the palette is itself well-designed – you’ll always have the proper contrast with the page background (which you’re also using for menubar background).

A couple other css notes:

  • For some reason, lots of declarations are doubled in your custom stylesheet for menubar, not sure why.
  • Rather than overwriting the menubar’s stylesheet, I’d recommend leaving the shadow as it is, and adding your own stylesheet designed to override just the elements you want to change – that is a bit safer for all custom css changes, and helps in troubleshooting issues just like this one.)
  • Assuming you want the menubar to match the page background, you’ll also want to override lines 86-90 or so of the menubar stylesheet, replacing <<button-foreground>> with something that reliably contrasts against the menubar / page background, such as <<colour primary>> 
nav.tc-menubar li.tc-menubar-item > a,
nav.tc-menubar li.tc-menubar-item > button {
	color: <<colour button-foreground>>;
1 Like
#3

Thank you @Springer . Sorry for the delay in replying. Now only I got time to make the suggestions you made in your reply. I reverted the changes made in the shadow tidlder and made a separate stylesheet for my modifications. Its working now.

1 Like