Инструменты разработчика в браузере помогут разобраться в ситуации, показав, какие стили применяются. В Chrome/Firefox нажмите правой кнопкой мыши на один из значков в заголовке и выберите «Inspect» (Проверить).
Найдите панель стилей, где отображается весь CSS-код, влияющий на элемент. Сам цвет значка должен управляться свойством color. Похоже, у вас также установлено свойство background-color со значением “primary”.
Справа отображается имя файла-источника для каждого блока CSS-стилей. Многие из них относятся к ядру Discourse (например, “header.scss” из скриншота). Если указано что-то вроде “theme_6.scss”, это, вероятно, из вашей темы или другого активного компонента темы. Вы можете кликнуть по имени файла, чтобы просмотреть его и увидеть, где именно в файле находится этот код (или обратиться к номеру строки справа от имени файла).
Наконец, вы можете включать и выключать свойства в панели стилей, чтобы увидеть, как это будет выглядеть, если их убрать (наведите курсор на свойство, чтобы увидеть флажок). Они перечислены от наивысшего приоритета к низшему, поэтому обычно те, что сверху, переопределяют всё, что ниже. Например, на скриншоте видно, что color: var(--primary-low-mid) из “buttons.scss” был переопределён (об этом свидетельствует зачёркивание).
Если вы не видите ничего очевидного, попробуйте выбрать родительские элементы на вкладке Elements (Элементы), чтобы поискать стили там. В данном случае иконка SVG находится внутри элемента ссылки (<a>), который, в свою очередь, находится внутри элемента списка (<li>), и цвет фона может поступать из одного из них.
Как только вы найдёте проблемный CSS-код в своей теме, вы сможете безопасно удалить его, чтобы вернуть внешний вид по умолчанию!
