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?

[BrettH (Brett)]

Vielen Dank an alle für die Vorschläge. Lassen Sie mich die Fragen beantworten:

NateDhaliwal – Ich habe es noch nicht im abgesicherten Modus getestet, aber basierend auf dem, was chapoi und Kris beschreiben, vermute ich, dass der abgesicherte Modus das Problem beheben würde, da er auf die Standard-Light-Palette anstelle meiner benutzerdefinierten zurückfallen würde.

@chapoi – Gute Frage. Unsere Farbpalette wurde vor einiger Zeit erstellt – definitiv bevor die Farben selected und hover zur Basispalette hinzugefügt wurden. Ich glaube, die Palette wurde eingerichtet, als wir die Community zum ersten Mal gestartet haben, und wir haben sie seitdem nicht aktualisiert.

@awesomerobot – Das ergibt Sinn. Wenn ich mir den Code ansehe, kann ich erkennen, dass resolved_colors Fallback-Werte für hover und selected mithilfe von dark_light_diff berechnet, falls diese in der Palette fehlen. Aber das Problem ist, dass die Textfarben (.name, .desc, .d-icon) immer noch ihre Standardwerte verwenden, die für die Auswahlfarbe der Standard-Light-Palette konzipiert wurden – nicht für den berechneten Fallback für mein dunkleres Theme.

Ich werde eine neue Palette erstellen und die Farben selected und hover explizit auf Werte setzen, die richtig kontrastieren. Ich vermute, das wird das Problem beheben.

Ein Gedanke beim Testen: Wäre es sinnvoll, wenn die Fallback-Berechnung auch den Textkontrast berücksichtigen würde? Auf diese Weise würden ältere Paletten neue Farbzusätze ohne manuelles Eingreifen elegant verarbeiten. Nur eine Idee – ich weiß, dass Farbsysteme schwierig zu handhaben sind, und der aktuelle Ansatz deckt wahrscheinlich die meisten Fälle ab. Ich kann gerne eine separate Funktionsanfrage stellen, falls das hilfreich ist.

Vielen Dank für die Hilfe bei der Aufklärung!