Select-kit Dropdown: ausgewählte/hervorgehobene Elemente haben schlechten Farbkontrast, Text und Icons verschwinden

[BrettH (Brett)]

Wenn Sie das Dropdown-Menü für Themenbenachrichtigungen (Watching/Tracking/Normal/Muted) verwenden, werden der Text und das Symbol des aktuell ausgewählten Elements aufgrund des unzureichenden Kontrasts zwischen der Hintergrundfarbe der Auswahl und den Vordergrundfarben unsichtbar.

Schritte zur Reproduktion

1. Öffnen Sie ein beliebiges Thema.

2. Klicken Sie auf die Benachrichtigungsglocke am unteren Rand des Themas.

3. Beobachten Sie die aktuell ausgewählte Benachrichtigungsstufe (z. B. „Tracking“).

Erwartetes Verhalten

Das ausgewählte Element sollte einen klar sichtbaren Text und ein Symbol mit gutem Kontrast aufweisen.

Tatsächliches Verhalten

• Das Textetikett verschwindet oder ist sehr schwer zu lesen.

• Das Glockensymbol wird unsichtbar.

• Das Problem ist in dunklen Themes am auffälligsten, kann aber je nach Farbpalette jedes Theme betreffen.

Technische Details

In app/assets/stylesheets/common/select-kit/select-kit.scss setzt der Zustand .is-selected nur die Hintergrundfarbe, ohne den Vordergrundkontrast sicherzustellen:

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // Keine Farb-Überschreibung für Text oder Icons
}

Die CSS-Variable --d-selected stammt von der $selected-Farbe des Themes, aber der Text (.name, .desc) und die Symbole (.d-icon) behalten ihre Standardfarben, die möglicherweise nicht gut mit dem Auswahlhintergrund kontrastieren.

Screenshots

Hinweis: Ich hätte das andere Bild, auf dem das Symbol für den ausgewählten Zustand verschwindet, hinzugefügt, aber ich bin neu und kann im Moment nur ein Bild hinzufügen.

Umgebung

• Discourse-Version: latest

• Browser: Edge

• Theme: Foundation Theme

[Noble_Fish]

@BrettH

Hinweis: Ich hätte das andere Bild hinzugefügt, auf dem das Symbol für den ausgewählten Zustand verschwindet, aber ich bin neu und kann im Moment nur ein Bild hinzufügen.

Dies ist eine Einschränkung für neue Benutzer. Sie können einige vorhandene Themen durchsuchen, damit Ihr Vertrauenslevel schnell auf 1 steigt.

[bryce (Bryce Huhtala)]

Ich kann diesen Fehler nicht reproduzieren.

[NateDhaliwal]

@BrettH Tritt dies im abgesicherten Modus auf?

[chapoi]

@BrettH

Die CSS-Variable --d-selected stammt von der $selected-Farbe des Themas, aber der Text (.name, .desc) und die Symbole (.d-icon) behalten ihre Standardfarben, die möglicherweise nicht gut mit dem Auswahlhintergrund kontrastieren.

Es sieht so aus, als wäre Ihre Farbpalette schon eine Weile nicht mehr aktualisiert worden, denn das ist nicht die normale ausgewählte Farbe. Wann haben Sie Ihr Forum zuletzt aktualisiert?

[Canapin (Coin-coin le Canapin)]

Könnte es mit folgendem zusammenhängen:

Discourse Free Plan setup - options are hard to read

Thanks for the details @NateDhaliwal. My hunch is that it’s related to that missing CSS var when light/dark mode is involved, and how it’s compiled via PostCSS. It looks like the browser may be falling back to the light mode background color, which is odd since I can’t reproduce this. Judging by the screenshots, my fix hadn’t been deployed to your instance yet. It should be deployed there now, so give it another try and let me know if you still notice anything off.

?

[awesomerobot (Kris)]

Ja, das ist wahrscheinlich der Fall – ich habe solche Situationen gesehen, in denen eine benutzerdefinierte Farbpalette, die erstellt wurde, bevor neue Farben hinzugefügt wurden, einen schlechten Kontrast aufweist… @BrettH Wenn Sie eine neue Farbpalette erstellen und diese verwenden, bleibt das Problem bestehen?