Durante bastante tiempo, he tenido problemas con los encabezados de mis iconos. Mi tema oscuro tiene iconos de encabezado blancos, mi tema claro tiene iconos de encabezado oscuros. Intenté de nuevo averiguar el problema y miré varios temas.
Sin embargo, después de mirar mis temas de color y jugar con ellos, descubrí que mi instancia no parece tener esa corrección. Esta publicación enlazada es de 2019, actualmente estoy en la versión 3.4.0.beta1-dev.
Nunca pensé en comprobarlo, lo acabo de hacer y sí, desapareció al hacerlo. Supongo que debe ser un problema del tema. Es bastante antiguo en este momento.
Las herramientas de desarrollador del navegador pueden ayudar a resolver esto mostrando qué estilos se están aplicando. Para Chrome/Firefox, haz clic derecho en uno de los iconos del encabezado y elige “Inspeccionar”.
Busca el panel de estilos, que muestra todo el código CSS que afecta al elemento. El color del icono en sí debe estar controlado por la propiedad color. Parece que el tuyo también podría tener un background-color establecido en “primary”.
A la derecha se muestra el nombre del archivo de origen de cada bloque de estilo CSS. Muchos de ellos son del núcleo de Discourse (por ejemplo, “header.scss” de la captura de pantalla). Si dice algo como “theme_6.scss”, probablemente sea de tu tema o de otro componente de tema activo. Puedes hacer clic en el nombre del archivo para verlo y ver dónde está ese código en el archivo (o consultar el número de línea a la derecha del nombre del archivo).
Por último, puedes activar y desactivar las propiedades en el panel de estilos para ver cómo se vería si se eliminaran (pasa el ratón sobre una propiedad para ver una casilla de verificación). Están listadas de mayor a menor prioridad, por lo que generalmente las de arriba anularán cualquier cosa debajo. Por ejemplo, en la captura de pantalla puedes ver que el color: var(--primary-low-mid) de “buttons.scss” fue anulado (indicado porque está tachado).
Si no ves nada obvio, puedes intentar seleccionar los elementos padres en la pestaña Elementos para buscar estilos allí. En este caso, el icono svg está dentro de un elemento de enlace (<a>), que está dentro de un elemento de elemento de lista (<li>), y el color de fondo podría provenir de uno de ellos.
