Diese Anleitung erklärt, wie Sie Farbpaletten für den hellen und dunklen Modus für das Theme Ihrer Discourse-Site einrichten. Sie behandelt die Konfiguration pro Theme, die Palettenzuweisung und Überlegungen zur Benutzeroberfläche.
Erforderliche Benutzerebene: 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 Ihrer Marke entspricht, die Barrierefreiheit verbessert und Ihren Benutzern die Kontrolle über ihr Seherlebnis 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 zu erlauben, ihr gewünschtes Erscheinungsbild auszuwählen.
Zusammenfassung
Diese Anleitung behandelt:
- Verstehen der Palettenzuweisungen für den hellen und dunklen Modus
- Zuweisen von Farbpaletten für hellen und dunklen Modus zu einem Theme
- Verwalten der Farbpaletten Ihrer Site
- Aktivieren des Farbmodus-Wählers für Benutzer
- Verstehen der benutzerorientierten Optionen
- Best Practices für die Verwendung von Paletten und Barrierefreiheit
Verstehen der Palettenzuweisungen für den hellen und dunklen Modus
Discourse-Themes unterstützen die explizite Zuweisung sowohl einer „hellen“ als auch einer „dunklen“ Farbpalette. Auf diese Weise kann jedes Theme automatisch basierend auf den Systemeinstellungen des Benutzers wechseln oder dem Benutzer die Auswahl eines bevorzugten Modus ermöglichen, während Ihre bevorzugten Markenfarben beibehalten werden.
Zuweisen von hellen und dunklen Paletten zu einem Theme
So konfigurieren Sie die Farbpaletten Ihres Themes:
-
Gehen Sie zu Admin > Erscheinungsbild > Themes & Komponenten (
/admin/config/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 Site 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 von Ihnen festgelegten sind die Standardeinstellungen.
Verwalten Ihrer Farbpaletten
Alle verfügbaren Farbpaletten (und ihre verknüpften Zuweisungen) können zentral verwaltet werden:
-
Navigieren Sie zu Admin > Erscheinungsbild > Farbpaletten (
/admin/config/colors) -
Hier können Sie Paletten bearbeiten, hinzufügen oder entfernen, sie als für Benutzer wählbar markieren und sie als Standardpaletten für den hellen und dunklen Modus Ihres Themes zuweisen.
Aktivieren des Farbmodus-Wählers
Bevor Benutzer auf der Site zwischen dem hellen und dunklen Modus wechseln können, müssen Sie die Site-Einstellung interface_color_selector aktivieren. Standardmäßig ist diese auf deaktiviert eingestellt.
Um es zu aktivieren:
- Gehen Sie zu Admin > Einstellungen und suchen Sie nach
interface color selector. - Setzen Sie es auf eine der folgenden Optionen:
- In der Seitenleisten-Fußzeile anzeigen — fügt einen Umschalter für Hell/Dunkel/Auto unten in der Seitenleiste hinzu
- Im Header anzeigen — fügt den Umschalter in den Site-Header ein
Ohne die Aktivierung dieser Einstellung sehen Benutzer keinen Farbmodus-Umschalter auf der Site, und die Site folgt automatisch den Systemeinstellungen jedes Benutzers.
Optionen für den Benutzer
Benutzereinstellungen
Benutzer können ihren bevorzugten Modus für die Anzeige der Site auswählen:
-
Gehen Sie zu Benutzereinstellungen > Oberfläche
-
Im Abschnitt „Farbpalette“ können Mitglieder ihre bevorzugten Paletten für den hellen und dunklen Modus auswählen, sowie den Modus, den sie verwenden möchten: Hell, Dunkel, Auto:
Wenn „Auto“ ausgewählt ist, passt sich Discourse dem Farbschema-Präferenz des Benutzers an.
Best Practices
- Markenkonsistenz: Passen Sie Paletten an Ihre Marke für beide Modi an. Halten Sie die Kernfarben konsistent, passen Sie sie jedoch für Kontrast und Lesbarkeit an.
- Barrierefreiheit: Stellen Sie sicher, dass die Farbkontrastverhältnisse die WCAG-Richtlinien erfüllen (dieses Tool kann helfen), insbesondere im dunklen Modus, wo 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 > Erscheinungsbild > Website-Logo (
/admin/config/logo) 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, für jeden Modus eine Hauptpalette beizubehalten, um Verwirrung zu vermeiden. Weisen Sie Themes nur die primären Paletten zur Auswahl durch Benutzer zu.
Kann ich jeden zwingen, nur den hellen (oder nur den dunklen) Modus zu verwenden?
Sie können dies tun, indem Sie dieselbe Palette als Standardpalette für den hellen und dunklen Modus 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 der Palettenwechsel das gesamte Theme oder nur die Farben?
Es ändern sich nur die Farbvariablen. Struktur, Schriftarten und Layout bleiben beim Wechsel der Farbpaletten unverändert.