No estoy seguro de si hay una configuración para esto, pero puedo mostrarte cómo intentaría cambiarlo usando CSS:
-
Haz clic derecho en el icono y elige ‘Inspeccionar’.
-
Esto abrirá las herramientas de desarrollo del navegador. (Nota: Estoy usando Chrome aquí, ¡pero la mayoría de los navegadores pueden hacer lo mismo!) Hay mucho que mirar, pero nos centraremos en dos secciones principales: Elementos, que muestra las partes de la página en una jerarquía anidada, y Estilos, que muestra qué CSS está afectando al elemento seleccionado.
-
Usar clic derecho → Inspeccionar generalmente nos acerca bastante al elemento que queremos editar, pero a menudo hay que buscar un poco. En este caso, seleccionó un elemento
<span>, pero parece que el elemento responsable del icono está dentro de él: un elemento::before.
-
Una de las formas de encontrar el elemento correcto es observar la página mientras pasas el cursor sobre los elementos de la lista en el panel de elementos. Cuando pasé el cursor sobre
::before, solo se resaltó el icono:
-
En el panel de Estilos, podemos ver que hay una declaración que establece el fondo en rojo, pero está siendo anulada por una regla diferente que lo establece en un fondo de 2 colores. (Nota: Siéntete libre de editar cualquier CSS en el panel de Estilos para experimentar. Cualquier cambio es temporal y se revertirá cuando la página se actualice. También puedes activar o desactivar declaraciones individuales para ver sus efectos)
-
Podemos crear una nueva regla para anularla nuevamente copiando la parte del selector de la regla superior y la declaración de fondo original de la regla inferior.
-
Esta nueva regla iría en tu CSS personalizado/tema y, si todo funcionara correctamente, ¡los iconos serían de colores sólidos que representan las subcategorías!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}