Utilisation d'icônes SVG dans la documentation d'aide pour la rendre visuellement compatible avec le mode sombre

Général
1

Après avoir activé le changement automatique de mode sombre, j’ai remarqué que de nombreuses captures d’écran expliquant les boutons individuels de l’interface utilisateur étaient horribles avec leurs arrière-plans blancs. J’ai essayé de réutiliser le code SVG que l’interface réelle utilise, mais cela n’a pas fonctionné. J’ai trouvé :

mais l’utilisation de fichiers SVG téléchargés directement depuis Font Awesome n’a pas non plus fonctionné et le lien GitHub vers les icônes de cette conversation ne correspondait pas parfaitement à l’interface utilisateur actuelle de Discourse. Heureusement, je suis tombé sur :

Cela m’a aidé à réaliser que oui, la largeur et la hauteur manquaient dans les téléchargements Font Awesome. J’ai trouvé les icônes v5 sur Font Awesome et j’ai modifié ces fichiers SVG. Une hauteur de 17px a bien fonctionné pour les boutons d’action de publication (14px pour les boutons de l’éditeur) et la largeur qui semblait appropriée selon le réglage viewBox ; un calculateur de rapport d’aspect s’est avéré utile par moments.

En plus d’avoir besoin d’ajouter la width et la height, j’ai également dû ajouter un fill au chemin. J’ai opté pour fill="currentColor" au lieu d’une couleur statique, car j’ai considéré la couleur du texte environnant comme un excellent défaut. Cependant, je voulais toujours que les icônes correspondent aux couleurs des boutons de l’interface utilisateur et non au texte environnant, et j’ai découvert que je pouvais conserver la syntaxe de téléchargement de fichiers ![alt](file) et toujours cibler ces SVG spécifiques en les encapsulant dans un span HTML (quelque chose que les utilisateurs réguliers ne feraient pas facilement) et en ajoutant

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%);
    }
}

au CSS. Ce CSS spécifique imite le var(--primary-low-mid) lorsque la couleur primaire est définie sur noir dans notre schéma de couleurs claires et sur #eee dans notre schéma de couleurs sombres, et tient également compte d’un span enveloppant existant dans le panneau d’aperçu de l’éditeur. Vous pouvez utiliser un générateur de filtre CSS pour savoir comment changer la couleur des SVG lorsqu’ils sont utilisés de cette manière. (Selon vos schémas de couleurs, vous voudrez peut-être vérifier à quoi cela ressemble si un utilisateur n’a pas l’option de changement automatique de mode sombre enregistrée dans ses paramètres de préférence, mais que son appareil est en mode sombre, car il existe un état intermédiaire qui peut survenir lors de l’utilisation de @media (prefers-color-scheme: dark) dans votre CSS.)

J’espère que ce processus de découverte aidera quelqu’un d’autre ! Si vous souhaitez télécharger et réutiliser/modifier les icônes que j’ai créées à cette fin (car cela a pris un temps considérable), vous pouvez les trouver sur les pages de tutoriels que j’ai terminées jusqu’à présent : actions et réactions de publication, style de publication de base, style de publication avancé et créateur de sondage. (J’ai seulement remplacé les icônes individuelles et conservé les captures d’écran du schéma de couleurs claires pour les images contextuelles, qui sont un mélange d’images tirées des documents d’aide ici sur meta et de captures d’écran que j’ai faites de notre site spécifique.)

7 « J'aime »