Changing SVG colors from desk-sidebar-item standard-sidebar-item

Frappe Framework Customization
1

I want to customize my sidebar selected item and hovered item in the navbar, however I’m having trouble changing the SVG colors for this scenarios. In the CSS I have tried the following:

.desk-sidebar-item.standard-sidebar-item.selected *{
  background-color: #F9FAFA;
  color:rgb(235, 13, 37)!important;
  stroke:rgb(235, 13, 37)!important ;
}

Using this the color of the SVG won’t change, the only way it seems to work is when I use a general styling for symbol tag:

symbol *{
  stroke:#EB0D25!important;
}

But using this I’m making all the symbol tags strokes this color and not only the selected and hovered ones. Does someone has an idea to make this possible?
Regards.

2

Hi @garciagonpablo,

Please try it.

  fill: #F9FAFA; /* Change the fill color for the SVG */
  stroke: rgb(235, 13, 37); /* Change the stroke color for the SVG */

Thank You!

3

Thank you @NCP ,

It didn’t work, I diagnosed that the problem is that the color of the svg is setted in the #shadow-root (closed) part of the DOM, is there a way/configuration were I can open this section? How should I proceed.