As ferramentas de desenvolvedor do navegador podem ajudar a resolver isso, mostrando quais estilos estão sendo aplicados. Para Chrome/Firefox, clique com o botão direito em um dos ícones do cabeçalho e escolha “Inspecionar”.
Procure pelo painel de estilos, que mostra todo o código CSS que está afetando o elemento. A cor do ícone em si deve ser controlada pela propriedade color. Parece que o seu também pode ter um background-color definido como “primary”.
À direita, ele mostra o nome do arquivo de origem para cada bloco de estilo CSS. Muitos deles são do Discourse principal (por exemplo, o “header.scss” da captura de tela). Se ele disser algo como “theme_6.scss”, provavelmente é do seu tema ou de outro componente de tema ativo. Você pode clicar no nome do arquivo para visualizá-lo e ver onde esse código está no arquivo (ou consultar o número da linha à direita do nome do arquivo).
Por último, você pode ativar e desativar as propriedades no painel de estilos para ver como ficaria se fossem removidas (passe o mouse sobre uma propriedade para ver uma caixa de seleção). Elas são listadas da prioridade mais alta para a mais baixa, então, geralmente, as de cima substituirão qualquer coisa abaixo. Por exemplo, na captura de tela, você pode ver que o color: var(--primary-low-mid) de “buttons.scss” foi substituído (indicado por estar riscado).
Se você não vir nada óbvio, pode tentar selecionar os elementos pais na guia Elementos para procurar estilos lá. Neste caso, o ícone svg está dentro de um elemento de link (<a>), que está dentro de um elemento de item de lista (<li>), e a cor de fundo pode estar vindo de um desses.
Depois de encontrar o código CSS problemático em seu tema, você poderá removê-lo com segurança para reverter para a aparência padrão!