feat: allow setting color of sidebar dropdown about docsify-themeable HOT 3 CLOSED

@maximousblk,

I agree it would be nice to allow users to change the sidebar link icon color with a theme property. At the very least, it should inherit the --theme-color value.

The simple explanation is that doing so is not as easy as it may appear because each implementation comes with its own drawbacks. I am familiar with CSS-only icons as you've suggested above, but these require standalone elements to style (which does not exist in HTML markup generated by docsify) or styling pseudo-content which can be tricky to "undo" when users prefer using background images for sidebar icons. In the end, I favored ease of changing the icon entirely over ease of changing the color of the existing icons. As a result, the simplest way to modify the sidebar icons is to use an alternate image. Services like https://icongr.am make this nice and easy:

<style>
  :root {
    --theme-hue: 20;
    --sidebar-nav-pagelink-background-image: url(https://icongr.am/entypo/chevron-right.svg?size=16&color=c7c7c7);
    --sidebar-nav-pagelink-background-image--active: url(https://icongr.am/entypo/chevron-down.svg?size=16&color=fc9867);
  }
</style>

Another option is to leverage the pseudo-content theme properties and render text characters instead of icons:

<style>
  :root {
    --theme-hue: 20;
    --sidebar-nav-link-before-content-l1: '+';
    --sidebar-nav-link-before-content-l1--active: '-';
    --sidebar-nav-link-before-color-l1: #b3b3b3;
    --sidebar-nav-link-before-color-l1--active: var(--theme-color);
    --sidebar-nav-pagelink-padding: 0.15em 0;
    --sidebar-nav-pagelink-background-image: none;
    --sidebar-nav-pagelink-background-image--active: none;
    --sidebar-nav-pagelink-background-image--collapse: none;
    --sidebar-nav-pagelink-background-image--loaded: none;
  }
</style>

Or, if you prefer the existing icons but just want to change the color, you can use the same SVGs-as-data-URIs included in the "Simple" or "Simple Dark" theme and just modify the colors as detailed in #3.

It's also worth mentioning that a more forward-thinking version of docsify-themeable will be implemented for docsify v5. I will definitely revisit this issue at that time as the markup and theme capabilities will change significantly.

Hope this helps!

from docsify-themeable.

Fixed in v0.9.0

from docsify-themeable.

awesome!

from docsify-themeable.