Спасибо за ваш ответ!
По какой-то причине, похоже, что цвета были правильными (мой любимый светло-голубой) для нативных иконок в заголовке, но не для моих остальных иконок, установленных через компонент темы.
Таким образом, светло-голубой цвет иконок «гамбургер» и поиска сработал, возможно, из-за их класса .header-dropdown-toggle.
Компонент темы, который добавляет мои дополнительные иконки, также добавляет селектор .custom-header-icon-link на том же уровне, что и класс .header-dropdown-toggle.
Возможно, эти селекторы обеспечивают достаточную специфичность, чтобы переопределить любое правило, использующее .discourse-no-touch? Честно говоря, я не до конца понимаю, что именно происходит здесь в CSS.
Но ваша подсказка помогла мне рефакторить мой CSS. Вот результат:
.d-header-icons {
.header-dropdown-toggle, .custom-header-icon-link {
.icon {
.d-icon {
color: white;
}
&:hover, &:focus {
background: white;
.d-icon {
color: var(--tertiary-medium);
}
}
}
&.active .icon .d-icon {
color: var(--tertiary-medium);
}
}
}
Это работает идеально, и я больше не использую .discourse-no-touch.
