Toolbar Icons should reflect the main theme color

[RealRaven2000]

Some (but not all) icons on toolbar buttons have hard coded color values that make them stick out especially with colored themes:

This is "Rose Pine Dawn" in Tb 140.8.1esr.

Another more extreme example would be the theme "game red", where we clearly see some icons being bright white while others are based on the main theme color:

This shows that it should be possible to "inherit" the theme color within svg icons to make everything look uniform. Also, when a theme modifies the text color of menus, the the inline menu icons should also uniformly reflect this color change.

[RealRaven2000]

This can be achieved by using the magic values context-fill and context-fill-opacity within the svg. for example:

<style>
    :root {
       --basiccolor: context-fill rgb(20,20,20);
       --fill: var(--basiccolor);
       --fill-opacity: context-fill-opacity;
    }
</style>  
<path 
   style="fill:var(--fill);fill-opacity:var(--fill-opacity);" 
   d="M14 3H8.15L6.58 1.54A2 2 0 005.22 1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2zM5.22 3l1.07 1H2V3zM14 13H2V5h6v-.01l.15.01H14z"/>
<path 

Also in the external style sheets, we are using a -moz-context-properties rule that forces the context to be transported in:

#QuickFolders-CurrentFolderTools toolbarbutton.icon {
    appearance: none !important;
    -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
}

[RealRaven2000]

Implemented in 6.15 - Published 19/03/2025