Há algum tempo, tenho tido problemas com os cabeçalhos dos meus ícones. Meu tema escuro tem ícones de cabeçalho brancos, meu tema claro tem ícones de cabeçalho escuros. Tentei novamente descobrir o problema e olhei vários tópicos.
No entanto, depois de olhar meus temas de cores e brincar com eles, descobri que minha instância parece não ter essa correção. Esta postagem vinculada é de 2019, estou atualmente na versão 3.4.0.beta1-dev.
Nunca pensei em verificar, acabei de fazer isso agora e sim, desapareceu ao fazer isso. Suponho que deva ser um problema do tema. Ele é bastante antigo neste momento.
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.
