Neuerungen in WoltLab Suite 6.0: Dunkles Farbschema

Bei der Gestaltung der eigenen Seite spielen Farben eine große Rolle, diese sollen wahlweise etwas bestimmtes ausdrücken oder zur Thematik der Seite beitragen; typische Beispiele hierfür sind Vereinsfarben oder das Farbschema des dazugehörigen Unternehmens oder Produktes. Ein Stil mit vordergründig sehr hellen Farben kann sehr gut aussehen, jedoch in Situationen mit geringerer Beleuchtung, beispielsweise in den Abendstunden, einen unangenehm starken Farbkontrast erzeugen.

Für diese Situationen kommt üblicherweise ein dunkles Farbschema (engl. „dark theme“) zum Einsatz, dessen Ziel es ist, die wesentlichen Farben beizubehalten, aber dennoch primär auf dunkle Töne zu setzen. Beliebt sind dunkle Grau- und Blautöne für den Hintergrund, die sowohl einen guten Kontrast bieten als auch das Design durch einen leichten Farbakzent auflockern.

Dunkles Farbschema als Alternative

Der Standardstil wird mit WoltLab Suite 6.0 um ein dunkles Farbschema ergänzt, das auf dunkle Hintergrundfarben mit heller Schrift setzt. Dieser umfasst alle Komponenten innerhalb der Software und so wurden beispielsweise auch die Farbwerte von Warnmeldungen oder Labels angepasst.

Barrierefreie Farbauswahl

Bei der Umsetzung haben wir viel Wert darauf gelegt, dass alle Texte einen Kontrast von mindestens 4,5:1 aufweisen um eine optimale Lesbarkeit zu gewährleisten und erfüllen damit die Kriterien der WCAG 2.0 Level AA. Dies stellt einen wichtigen Baustein bei der Barrierefreiheit dar und wird auch von Suchmaschinen wie beispielsweise Google positiv berücksichtigt.

Manuelle Auswahl des Farbschemas

Das dunkle Farbschema ist für jeden Stil individuell und optional konfigurierbar, es damit auch weiterhin möglich, nur eine einzige Variante eines Stils zu pflegen. Bestehende Stile können selbst oder durch den Stil-Ersteller um eine dunkle Farbvariante ergänzt werden.

Die Auswahl des Farbschema erfolgt standardmäßig implizit auf Basis der eingestellten Präferenzen des Browsers und Betriebssystems, vorausgesetzt für den aktuell ausgewählte Stil ist ein dunkles Farbschema konfiguriert. Nutzer haben darüber hinaus die Möglichkeit, explizit die Verwendung des hellen oder dunklen Farbschemas zu erzwingen und so individuell pro verwendetem Endgerät eine separate Präferenz festzulegen.

Überarbeitung des Layout der Administrationsoberfläche

In der Administrationsoberfläche steht das dunkle Farbschema ebenfalls zur Verfügung und erlaubt damit eine einheitliche Berücksichtigung der Präferenzen des Benutzers. Das dunkle Farbschema steht dabei unabhängig von installierten Stilen immer verfügbar.

Das Layout der Menüs sowie der Kopfzeile wurde modernisiert, insbesondere steht nun mehr Platz für den Inhaltsbereich zur Verfügung und das Menü kann auf derselben vertikalen Höhe mehr Menüpunkte darstellen.

Kommentare 18

Ich finde es super, dass es einen dunklen Modus gibt, aber wie kann ich Nutzern ermöglichen, den Modus umzuschalten? Derzeit habe ich eine Standard-Installation mit dem Standard-Stil und es erscheint keine Stil-Auswahl und ich sehe auch sonst in der Oberfläche nirgendwo die Möglichkeit, den Modus zu wechseln?

Standardmäßig passt sich das Farbschema den Einstellungen des Browser bzw. des Betriebssystems an. Eine dauerhafte Festlegung des hellen bzw. dunklen Farbschemas kann in den Einstellungen im Profil erfolgen.

Kann man auch bspw. unterschiedliche Farben für Labels etc. vergeben? Weil was im Normalmodus passt sieht vielleicht nicht so toll im Darkmode aus.

Zudem hätte ich mir einen Screenshot von den Einstellungsmöglichkeiten im Backend gewünscht.

Alle Labels verwenden im Dark Mode bereits andere Farbwerte, damit der Kontrast gewahrt bleibt.

Ganz allgemein find ich das modernisierte Design des ACP sehr gelungen. Wieso spiegelt sich das neue topMenu nicht im Frontend wieder? Nicht nur, dass Frontend und ACP jetzt stilistisch nicht mehr zusammen passen - der Header im Frontend sieht mit seinen klobigen Icons schon lange nicht mehr zeitgemäß aus.

Wir waren darum bemüht, die Kompatibilität mit bestehenden Stilen so gut es geht aufrecht zu erhalten. Die Modernisierung des Frontend-Headers steht auf unserer Liste, beschränkt sich dabei aber nicht nur auf die Icons und würde größere Änderungen nach sich ziehen. Viele Stile werden mit wenigen bis moderaten Anpassungen unter 6.0 lauffähig sein und so den Umstieg auf die neue Version erleichtern.

Beim ACP haben wir sehr viel mehr Freiheit und können auch neue Konzepte ausprobieren, ohne dass sich dies negativ auf die Kompatibilität auswirkt.

Verstehe. Ich weiß nicht genau wie weit ihr bei der Modernisierung gehen wollt, aber für die Angleichung an das ACP ist nicht mehr als etwas CSS nötig.

https://darkwood.design/_files/wcf6_mockup.png

Ja, du hast völlig recht. Jedoch wirkt es sich auch auf alle Stile aus und genau das möchten wir an dieser Stelle vorerst vermeiden.

Das ist wunderbar, dass der Darkmode bald von Haus aus vom WSC unterstützt wird :) :thumbup:

Werden Einbettungen wie Tweets oder GitHub Gists auch vom aktuell ausgewählten Farbschema beeinflusst, sodass sie farblich passen?

Tweets werden passend zum beim Laden der Seite gewählten Farbschema eingebunden. Bei anderen Anbietern fehlt eine entsprechende Unterstützung leider bzw. ist nicht mit den uns aktuell zur Verfügung stehenden Mitteln lösbar. Hier müssen wir ggf. Erfahrungswerte sammeln, um zu sehen, wie wir hier eine dauerhafte Lösung finden können.

Dank des Plugins "Power Einstellungen" können wir im ACP schon seit Monaten einen Dark Mode nutzen. Sehr erfreulich, dass er bald offiziell Einzug hält, insbesondere im Frontend.

Ob das geänderte Layout der Menüs und der Kopfzeile im ACP besser ist, wird der Praxistest zeigen. Denn mehr Platz für den Inhaltsbereich und das Menü auf gleicher Höhe durch Maßnahmen wie kürzere Abstände, schmalere Klickbereiche und kleinere Schriftgrößen kann sich schlimmstenfalls negativ auf die Usability auswirken.

Die farblich kontrastierenden und mit Groß- und Kleinbuchstaben formatierten "Gruppentitel" mit den Trennlinien sind schon einmal leichter lesbar und lassen sich dadurch schneller erfassen – gut gemacht!

Der Darkmode ist schön umgesetzt, gefällt mir 😎

Was mir nicht gefällt sind die Label 👀 Wäre es nicht besser die in der zweiten Reihe zu setzen so wie es auch in den Themen ist? Da sind die Label auch vor den Namen. Dann hätten die Überschriften keinen Versatz, es wäre leichter die Liste von oben nach unten zu scannen und der Titel müsste nicht weiter gekürzt werden.

Zitat

Nutzer haben darüber hinaus die Möglichkeit, explizit die Verwendung des hellen oder dunklen Farbschemas zu erzwingen und so individuell pro verwendetem Endgerät eine separate Präferenz festzulegen.

Wo? Bitte sagt mir nicht, dass es in den Einstellungen im Benutzerprofil irgendwo versteckt ist.

Im Frontend auf jeder Seite unten neben der Position, an der beispielsweise "Stil ändern" auftaucht. Im ACP befindet sich diese Option oben rechts, auf dem Screenshot als "Mond"-Symbol sichtbar.

Sorry, ich habe die neue Suite gerade installiert, aber dieses "Mondsymbol" taucht bei mir nicht auf! Muß man da vorher noch etwas freischalten?

Die Einstellung wurde auf Grund verschiedener (konzeptueller) Schwächen an dieser Stelle entfernt und findet sich nun in den Einstellungen im Kontrollzentrum.

wow hat nur 5 Jahre gebraucht 8o

Gefühlt eher 8-10 Jahre, bezogen aufs ACP.