feat: allow setting color of sidebar dropdown

[maximousblk]

Maybe I'm missing something but, there seems to be no way to set a custom color for the dropdown arrows in the sidebar both in the default themes (Simple and Simple Dark)

ref: (note the blue dropdown arrow)

After doing some digging, I found out that those arrows are base64 SVGs. Problem with this approach is that CSS variables do not work with SVGs because SVGs act like a separate document.

The arrows can be easily made using CSS and transformed between active and inactive states. This would allow the user to customize the color of the arrows.

css for dropdown arrow:

.inactive-arrow {
  border: var(--sidebar-nav-pagelink-toggle-color);
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 1.5px;
}

.active-arrow {
  border: var(--sidebar-nav-pagelink-toggle-color--active);
  border-width: 0 0 1.5px 1.5px;
  display: inline-block;
  padding: 1.5px;
}

[jhildenbiddle]

@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!

[jhildenbiddle]

Fixed in v0.9.0

[maximousblk]

awesome!