Dieser Leitfaden erklärt, wie Sie Farbpaletten für den hellen und dunklen Modus für das Theme Ihrer Discourse-Site einrichten. Er behandelt die Konfiguration pro Theme, die Zuweisung von Paletten und Überlegungen zur Benutzeroberfläche.
Erforderliches Benutzerniveau: Administrator
Die Konfiguration separater Farbpaletten für den hellen und dunklen Modus ermöglicht es Ihnen, Ihre Discourse-Community so zu präsentieren, dass sie zu Ihrer Marke passt, die Zugänglichkeit verbessert und Ihren Benutzern die Kontrolle über ihre Anzeigeerfahrung gibt. Die jüngsten Verbesserungen am Theming-System von Discourse ermöglichen es Ihnen, jedem Theme eine bevorzugte helle und dunkle Palette zuzuweisen und den Benutzern die Wahl ihres gewünschten Erscheinungsbilds zu überlassen.
Zusammenfassung
Dieser Leitfaden behandelt:
- Verständnis der Zuweisung von Paletten für den hellen und dunklen Modus
- Zuweisung von Farbpaletten für den hellen und dunklen Modus zu einem Theme
- Verwaltung der Farbpaletten Ihrer Website
- Verständnis der Benutzeroberflächenoptionen
- Best Practices für die Verwendung von Paletten und Barrierefreiheit
Verständnis der Zuweisung von Paletten für den hellen und dunklen Modus
Discourse-Themes unterstützen die explizite Zuweisung einer „hellen“ und einer „dunklen“ Farbpalette. Auf diese Weise kann jedes Theme automatisch basierend auf den Systemeinstellungen des Benutzers wechseln oder dem Benutzer die Wahl eines bevorzugten Modus überlassen, während Ihre bevorzugten Markenfarben beibehalten werden.
Zuweisung von hellen und dunklen Paletten zu einem Theme
So konfigurieren Sie die Farbpaletten Ihres Themes:
-
Gehen Sie zu Admin > Darstellung > Themes & Komponenten (
/admin/customize/themes) -
Klicken Sie auf das Theme, das Sie bearbeiten möchten.
-
Suchen Sie in den Theme-Einstellungen den Abschnitt Farbpaletten.
-
Wählen Sie sowohl für Farbpalette als auch für Dunkle Farbpalette die gewünschte Palette aus.
-
Klicken Sie unten auf der Theme-Einstellungsseite auf Speichern.
Dies stellt sicher, dass das Theme Ihrer Website die richtige Palette sowohl für Benutzer im hellen als auch im dunklen Modus verwendet. Beachten Sie, dass andere vom Benutzer wählbare Paletten weiterhin von Ihren Mitgliedern ausgewählt werden können, aber die hier festgelegten werden die Standardeinstellungen sein.
Verwaltung Ihrer Farbpaletten
Alle verfügbaren Farbpaletten (und ihre verknüpften Zuweisungen) können zentral verwaltet werden:
-
Navigieren Sie zu Admin > Darstellung > Farbpaletten (
/admin/customize/colors) -
Hier können Sie Paletten bearbeiten, hinzufügen oder entfernen, sie als vom Benutzer wählbar markieren und sie als Standard-Hell- und Dunkelpaletten für Ihr Theme zuweisen.
Benutzeroberflächenoptionen
Benutzereinstellungen
Benutzer können ihren bevorzugten Modus für die Anzeige der Website auswählen:
-
Gehen Sie zu Benutzereinstellungen > Oberfläche
-
Im Abschnitt „Farbpalette“ können Mitglieder ihre bevorzugten hellen und dunklen Paletten sowie den Modus auswählen, den sie verwenden möchten: Hell, Dunkel, Auto:
Wenn „Auto“ ausgewählt ist, passt sich Discourse an die Farbschema-Einstellungen des Systems des Benutzers an.
Best Practices
- Markenkonsistenz: Passen Sie Paletten an, um Ihre Marke für beide Modi abzustimmen. Behalten Sie Kernfarben bei, passen Sie jedoch Kontrast und Lesbarkeit an.
- Barrierefreiheit: Stellen Sie sicher, dass die Farbkontrastverhältnisse den WCAG-Richtlinien entsprechen (dieses Tool kann helfen), insbesondere im dunklen Modus, in dem einige Farben gedämpft erscheinen können.
- Testen auf mehreren Geräten: Überprüfen Sie das Erscheinungsbild in beiden Modi auf verschiedenen Geräten und Browsern.
- Logo-Assets: Sie können separate Logos für den hellen und dunklen Modus unter Admin > Darstellung > Logos hochladen.
- Halten Sie die Palettenanzahl überschaubar: Bieten Sie nur die Paletten an, die Benutzer benötigen oder die als angemessen erachtet werden.
FAQs
Kann ich mehr als eine dunkle oder helle Palette haben?
Ja, aber es wird empfohlen, eine Hauptpalette für jede beizubehalten, um Verwirrung zu vermeiden. Weisen Sie Themes nur die primären Paletten für die Benutzerauswahl zu.
Kann ich alle zwingen, nur den hellen (oder nur den dunklen) Modus zu verwenden?
Sie können dies tun, indem Sie dieselbe Palette als Standard-Hell- und Dunkelpalette festlegen und sicherstellen, dass keine anderen Paletten vom Benutzer ausgewählt werden können.
Werden benutzerdefinierte Theme-Komponenten automatisch Farben anpassen?
Wenn sie die CSS-Farbvariablen von Discourse verwenden (z. B. --primary, --secondary), erben sie die Palette. Es ist am besten, hartcodierte Farben in benutzerdefiniertem CSS zu vermeiden.
Ändert das Umschalten der Palette das gesamte Theme oder nur die Farben?
Nur Farbvariablen ändern sich. Struktur, Schriftarten und Layout bleiben beim Wechseln der Farbpaletten gleich.