Utilizzo di icone SVG nella documentazione di aiuto per la compatibilità visiva con la modalità scura

Generale
1

Dopo aver abilitato il passaggio automatico alla modalità scura, ho notato che molti dei miei screenshot che spiegavano i singoli pulsanti dell’interfaccia utente apparivano terribili con i loro sfondi bianchi. Ho tentato di riutilizzare il codice svg che l’interfaccia effettiva sta utilizzando, ma non ha funzionato. Ho trovato:

ma anche l’utilizzo di file SVG scaricati direttamente da Font Awesome non ha funzionato e il link GitHub alle icone di quella conversazione non corrispondeva perfettamente all’attuale interfaccia utente di Discourse. Fortunatamente mi sono imbattuto in:

Questo mi ha aiutato a capire che sì, larghezza e altezza mancano nei download di Font Awesome. Ho trovato le icone v5 su Font Awesome e ho modificato quei file svg. Un’altezza di 17px ha funzionato bene per i pulsanti di azione dei post (14px per i pulsanti dell’editor) e qualsiasi larghezza che avesse senso per l’impostazione viewBox; un calcolatore di proporzioni è stato utile a volte.

Oltre alla necessità di aggiungere width e height, ho anche dovuto aggiungere un fill al percorso. Ho optato per fill="currentColor" invece di un colore statico, poiché ho considerato il colore del testo circostante un ottimo valore predefinito. Tuttavia, volevo comunque che le icone corrispondessero ai colori dei pulsanti dell’interfaccia utente e non al testo circostante, e ho scoperto che potevo mantenere la sintassi ![alt](file) per il caricamento di file e comunque puntare a questi svg specifici racchiudendoli in uno span html (cosa che gli utenti normali non farebbero) e aggiungendo

p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
    filter: invert(85%) sepia(14%) saturate(0%) hue-rotate(169deg) brightness(85%) contrast(83%);
}

@media (prefers-color-scheme: dark) {
    p > span:not(.image-wrapper) > img, p > span:not(.image-wrapper) > span.image-wrapper > img {
        filter: invert(51%) sepia(0%) saturate(484%) hue-rotate(216deg) brightness(102%) contrast(88%);
    }
}

al css. Questo css specifico imita var(--primary-low-mid) quando il colore primario è impostato su nero nel nostro schema di colori chiari e #eee nel nostro schema di colori scuri, e tiene conto anche di uno span di avvolgimento esistente nel pannello di anteprima dell’editor. Puoi usare un generatore di filtri CSS per capire come cambiare il colore del svg quando viene utilizzato in questo modo. (A seconda dei tuoi schemi di colori, potresti voler ricontrollare come appare se un utente non ha l’opzione di passaggio automatico alla modalità scura salvata nelle sue impostazioni di preferenza, ma ha il suo dispositivo in modalità scura, poiché esiste uno stato intermedio che può verificarsi quando si utilizza @media (prefers-color-scheme: dark) nel tuo css.)

Spero che questo processo di scoperta aiuti qualcun altro! Se vuoi scaricare e riutilizzare/modificare le icone che ho creato per questo scopo (poiché è stato piuttosto dispendioso in termini di tempo), puoi trovarle nelle pagine tutorial che ho completato finora: azioni e reazioni dei post, stile di base dei post, stile avanzato dei post e costruttore di sondaggi. (Ho sostituito solo le singole icone e ho mantenuto gli screenshot dello schema di colori chiari per le immagini contestuali, che sono un mix di immagini tratte dalla documentazione di aiuto qui su meta e screenshot che ho realizzato del nostro sito specifico.)

7 Mi Piace