Changing color of collapsing arrow

[beraybentesen]

Hi,

I'd like to change tint/color of arrow from the nav bar

Thanks.

[jhildenbiddle]

Easy enough. 😄

The sidebar expand/collapse icons seen in the "Simple" and "Simple Dark" themes are background images. Specifically, they are SVG images assigned to CSS custom properties as data URIs. To change the icons, simply customize these values as described in the docs.

Here are the values from the "Simple" theme:

:root {
    --sidebar-nav-pagelink-background-image          : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11.2' viewBox='0 0 7 11.2'%3E%3Cpath d='M1.5 1.5l4 4.1 -4 4.1' stroke-width='1.5' stroke='rgb%28179, 179, 179%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sidebar-nav-pagelink-background-image--active  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb%2811, 135, 218%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sidebar-nav-pagelink-background-image--collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11.2' viewBox='0 0 7 11.2'%3E%3Cpath d='M1.5 1.5l4 4.1 -4 4.1' stroke-width='1.5' stroke='rgb%2811, 135, 218%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sidebar-nav-pagelink-background-image--loaded  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb%2811, 135, 218%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

Because these icons are SVGs-as-data-URIs, you can change their color by editing the stroke RGB values (e.g. stroke='rgb%2811, 135, 218%29'):

:root {
    /* green = rgb(0, 128, 0) */
    --sidebar-nav-pagelink-background-image          : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11.2' viewBox='0 0 7 11.2'%3E%3Cpath d='M1.5 1.5l4 4.1 -4 4.1' stroke-width='1.5' stroke='rgb%280, 128, 0%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");

    /* red = rgb(255, 0, 0) */
    --sidebar-nav-pagelink-background-image--active  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb%28255, 0, 0%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sidebar-nav-pagelink-background-image--collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='11.2' viewBox='0 0 7 11.2'%3E%3Cpath d='M1.5 1.5l4 4.1 -4 4.1' stroke-width='1.5' stroke='rgb%28255, 0, 0%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --sidebar-nav-pagelink-background-image--loaded  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.2' height='7' viewBox='0 0 11.2 7'%3E%3Cpath d='M1.5 1.5l4.1 4 4.1-4' stroke-width='1.5' stroke='rgb%28255, 0, 0%29' fill='none' stroke-linecap='square' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

If you prefer to use your own icons, you can change these values to new SVG data URIs or standard images:

:root {
    /* Right arrow */
    --sidebar-nav-pagelink-background-image          : url("https://ionicons.com/ionicons/svg/md-arrow-forward.svg");

    /* Down arrow */
    --sidebar-nav-pagelink-background-image--active  : url("https://ionicons.com/ionicons/svg/md-arrow-down.svg");
    --sidebar-nav-pagelink-background-image--collapse: url("https://ionicons.com/ionicons/svg/md-arrow-down.svg");
    --sidebar-nav-pagelink-background-image--loaded  : url("https://ionicons.com/ionicons/svg/md-arrow-down.svg");

    /* Adjust size (if needed) */
    --sidebar-nav-pagelink-background-size           : 1em;

    /* Adjust padding (if needed) */
    --sidebar-nav-pagelink-padding                   : 0.25em 0 0.25em 25px;
}

SVG data URIs are nice because the images are embedded in the CSS (saving a request for each image) and values (like color) can be edited directly without the need to create separate image files. If you need to convert SVGs to data URIs, there are many tools available online (here, here, here, and here).

Hope this helps.

[jhildenbiddle]

Fixed in v0.9.0