Vielen Dank für deine Antwort!
Aus irgendeinem Grund scheinen die Farben für die nativen Header-Icons die richtige (mein liebes Hellblau) gewesen zu sein, aber nicht für meine anderen Icons, die durch eine Theme-Komponente festgelegt wurden.
Die Hamburger- und Such-Icons hatten also die richtige hellblaue Farbe, vielleicht wegen ihrer .header-dropdown-toggle-Klasse.
Die Theme-Komponente, die meine zusätzlichen Icons hinzufügt, fügt auch einen .custom-header-icon-link-Selektor auf der gleichen Ebene wie die .header-dropdown-toggle-Klasse hinzu.
Vielleicht bieten diese Selektoren genug Präzision, um jede Regel zu überschreiben, die .discourse-no-touch verwendet? Ehrlich gesagt, bin ich mir nicht sicher, ob ich alles verstehe, was hier in CSS passiert.
Aber dein Vorschlag hat mir geholfen, mein CSS zu refaktorieren. Hier ist das Ergebnis:
.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);
}
}
}
Es funktioniert perfekt und ich verwende .discourse-no-touch nicht.
