SVG-Icons in der Hilfe-Dokumentation verwenden, um die visuelle Kompatibilität mit dem Dark Mode zu gewährleisten

Allgemein
1

Nachdem automatisches Umschalten des dunklen Modus aktiviert wurde, habe ich festgestellt, dass viele meiner Screenshots, die einzelne Benutzeroberflächenschaltflächen erklären, mit ihren weißen Hintergründen schrecklich aussahen. Ich habe versucht, den SVG-Code wiederzuverwenden, den die tatsächliche Benutzeroberfläche verwendet, aber das hat nicht funktioniert. Ich habe Folgendes gefunden:

Aber auch das direkte Herunterladen von SVG-Dateien von Font Awesome funktionierte nicht, und der GitHub-Link zu Symbolen aus dieser Konversation passte nicht perfekt zur aktuellen Discourse-Benutzeroberfläche. Glücklicherweise bin ich auf Folgendes gestoßen:

Dies half mir zu erkennen, dass die Breite und Höhe in den Font Awesome-Downloads tatsächlich fehlten. Ich habe die v5-Symbole bei Font Awesome gefunden und diese SVG-Dateien angepasst. Eine Höhe von 17 Pixeln funktionierte gut für die Aktionsschaltflächen (14 Pixel für die Editor-Schaltflächen) und welche Breite auch immer sinnvoll war, gemäß der viewBox-Einstellung; ein Seitenverhältnisrechner war manchmal nützlich.

Zusätzlich zum Hinzufügen von width und height musste ich auch ein fill zum Pfad hinzufügen. Ich habe mich für fill="currentColor" entschieden, anstatt einer statischen Farbe, da ich die Farbe des umgebenden Textes als ausgezeichneten Standard betrachtete. Ich wollte jedoch immer noch, dass die Symbole mit den Farben der UI-Schaltflächen und nicht mit dem umgebenden Text übereinstimmen. Ich habe festgestellt, dass ich die Syntax für den Datei-Upload ![alt](file) beibehalten und diese spezifischen SVGs immer noch ansprechen kann, indem ich sie in ein HTML-Span einhülle (etwas, das normale Benutzer wahrscheinlich nicht tun würden) und Folgendes hinzufüge:

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

zu den CSS. Dieses spezifische CSS ahmt var(--primary-low-mid) nach, wenn die Primärfarbe in unserem hellen Farbschema auf Schwarz und in unserem dunklen Farbschema auf #eee gesetzt ist, und berücksichtigt auch ein vorhandenes umgebendes Span im Editor-Vorschaufenster. Sie können einen CSS-Filtergenerator verwenden, um herauszufinden, wie Sie die SVG-Farbe auf diese Weise ändern können. (Abhängig von Ihren Farbschemata möchten Sie möglicherweise überprüfen, wie es aussieht, wenn ein Benutzer die Option zum automatischen Umschalten des dunklen Modus nicht in seinen Einstellungen gespeichert hat, aber sein Gerät im dunklen Modus hat, da es einen Zwischenzustand geben kann, wenn @media (prefers-color-scheme: dark) in Ihrem CSS verwendet wird.)

Hoffentlich hilft dieser Entdeckungsprozess jemand anderem! Wenn Sie die Symbole, die ich für diesen Zweck erstellt habe, herunterladen und wiederverwenden/anpassen möchten (da dies einigermaßen zeitaufwändig war), können Sie sie von den Tutorial-Seiten herunterladen, die ich bisher abgeschlossen habe: Post-Aktionen & Reaktionen, Grundlegende Post-Formatierung, Erweiterte Post-Formatierung und Umfrage-Ersteller. (Ich habe nur die einzelnen Symbole ersetzt und die Screenshots im hellen Farbschema für die kontextbezogenen Bilder beibehalten, die eine Mischung aus Bildern aus den Hilfe-Dokumenten hier im Meta und Screenshots sind, die ich von unserer spezifischen Website gemacht habe.)

7 „Gefällt mir“