¡Gracias por tu respuesta!
Por alguna razón, parece que los colores eran los correctos (mi querido azul claro) para los iconos nativos del encabezado, pero no para mis otros iconos, establecidos por un componente temático.
Entonces, el color azul claro de los iconos de hamburguesa y búsqueda funcionó, tal vez debido a su clase .header-dropdown-toggle.
El componente temático que agrega mis iconos adicionales también agrega un selector .custom-header-icon-link al mismo nivel que la clase .header-dropdown-toggle.
¿Quizás estos selectores agregan suficiente precisión para anular cualquier regla que use .discourse-no-touch? Honestamente, no estoy seguro de entender todo lo que está sucediendo aquí en CSS.
Pero tu sugerencia me ayudó a refactorizar mi CSS. Aquí está el resultado:
.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);
}
}
}
Funciona perfectamente y no utilizo .discourse-no-touch.
