Quando si utilizza il menu a discesa delle notifiche dell’argomento (Watching/Tracking/Normal/Muted), il testo e l’icona dell’elemento attualmente selezionato diventano invisibili a causa del contrasto insufficiente tra il colore di sfondo della selezione e i colori in primo piano.
Passaggi per riprodurre
Aprire un qualsiasi argomento
Fare clic sul pulsante della campanella delle notifiche in fondo all’argomento
Osservare il livello di notifica attualmente selezionato (ad esempio, “Tracking”)
Comportamento previsto
L’elemento selezionato dovrebbe avere testo e icona chiaramente visibili con un buon contrasto.
Comportamento attuale
L’etichetta del testo scompare o diventa molto difficile da leggere
L’icona della campanella diventa invisibile
Il problema è più evidente nei temi scuri, ma può interessare qualsiasi tema a seconda della palette di colori
Dettagli tecnici
In app/assets/stylesheets/common/select-kit/select-kit.scss, lo stato .is-selected imposta solo il colore di sfondo senza garantire il contrasto in primo piano:
&.is-selected,
&.is-selected.is-highlighted {
background: var(--d-selected);
// Nessuna sovrascrittura del colore per testo o icone
}
La variabile CSS --d-selected deriva dal colore $selected del tema, ma il testo (.name, .desc) e le icone (.d-icon) mantengono i loro colori predefiniti che potrebbero non contrastare bene con lo sfondo della selezione.
Questa è una restrizione per i nuovi utenti. Puoi navigare in alcuni argomenti esistenti in modo che il tuo livello di fiducia possa salire rapidamente a 1.
Sembra che la tua tavolozza di colori non sia stata aggiornata da un po’, perché quello non è il normale colore di selezione. Quando hai aggiornato il tuo forum l’ultima volta?
Sì, questo è probabile: ho visto situazioni come questa in cui una palette di colori personalizzata creata prima che venissero aggiunti nuovi colori finisce per avere un contrasto scarso… @BrettH se crei una nuova palette di colori e la usi, il problema persiste?
Grazie a tutti per i suggerimenti. Vorrei rispondere alle domande:
NateDhaliwal - Non ho ancora testato in modalità provvisoria, ma basandomi su ciò che descrivono chapoi e Kris, sospetto che la modalità provvisoria risolverebbe il problema poiché tornerebbe alla palette Light predefinita anziché alla mia personalizzata.
@chapoi - Buona domanda. La nostra palette di colori è stata creata parecchio tempo fa, sicuramente prima che i colori selected e hover venissero aggiunti alla palette di base. Credo che la palette sia stata impostata al momento del lancio della community e non l’abbiamo aggiornata da allora.
@awesomerobot - Ha senso. Guardando il codice, vedo che resolved_colors calcola i valori di fallback per hover e selected usando dark_light_diff se sono assenti dalla palette. Ma il problema è che i colori del testo (.name, .desc, .d-icon) utilizzano ancora i loro valori predefiniti, che sono stati progettati per il colore di selezione della palette Light predefinita, non per il fallback calcolato per il mio tema più scuro.
Creerò una nuova palette e imposterò esplicitamente i colori selected e hover su valori che contrastino correttamente. Sospetto che questo lo risolverà.
Un pensiero mentre sto testando: avrebbe senso che il calcolo del fallback considerasse anche il contrasto del testo? In questo modo le palette più vecchie gestirebbero con grazia le nuove aggiunte di colori senza intervento manuale. Solo un’idea - so che i sistemi di colori sono difficili da impostare correttamente, e l’approccio attuale probabilmente copre la maggior parte dei casi. Sarei felice di aprire una richiesta di funzionalità separata se fosse utile.
Grazie per l’aiuto nel rintracciare questo problema!
