Automatische Farbschema-Umschaltung für Dark Mode

[pmusaraj (Penar Musaraj)]

Du kannst deine Discourse-Seite jetzt so einrichten, dass sie automatisch das Farbschema wechselt, wenn das Gerät des Benutzers im Dunkelmodus ist. Für eine schnelle Vorschau gehe zur Instanz try.discourse.org und schalte den Dunkelmodus deines Geräts ein und aus, um diese neue Funktion in Aktion zu sehen. (Diese Funktion ist auf meta nicht aktiviert.)

Automatischen Dunkelmodus aktivieren

Um diese Funktion auf deiner Instanz zu aktivieren, kannst du das Farbschema für den Dunkelmodus in den Einstellungen deiner Seite auswählen:

Sobald diese Einstellung gesetzt ist, kannst du deine Seite mit einem Gerät neu laden, das sich im Dunkelmodus befindet, und du solltest das dunkle Farbschema aktiv sehen.

Falls das Logo, das bei einem hellen Schema gut aussah, auf dunklem Hintergrund nicht so gut wirkt, kannst du jetzt Alternativen in den neuen Einstellungen laden, die im Kern enthalten sind.

Die in diesen Einstellungen hochgeladenen Dateien ersetzen die reguläre Einstellung mit demselben Namen, wenn a) der automatische Wechsel des Dunkelmodus aktiviert ist und das Gerät des Benutzers im Dunkelmodus ist, oder b) der Benutzer ein dunkles Theme verwendet (auch wenn er nicht im Dunkelmodus ist). Seiten, die zuvor https://meta.discourse.org/t/alternative-logos-for-dark-light-themes/88502 verwendet haben, können nun auf die Kern-Einstellungen der Seite umstellen und diese Komponente entfernen.

Manche Benutzer möchten nicht automatisch zu einem dunklen Farbschema wechseln, wenn ihr Browser im Dunkelmodus ist. Sie können diese Funktion deaktivieren, indem sie die Option „Automatischen Wechsel des Dunkelmodus-Farbschemas aktivieren" auf dem Bildschirm „Einstellungen > Oberfläche" deaktivieren:

---

Auswähler für benutzerdefinierte Farbschemata

Um diese Funktion zu nutzen, musst du mehrere Farbschemata auf deiner Seite erstellen und sie als für Benutzer auswählbar markieren:

Sobald dies erledigt ist, sollten Benutzer zwei Dropdown-Menüs auf der Seite „Einstellungen > Oberfläche" sehen:

Siehe auch Update themes and plugins to support automatic dark mode

[pmusaraj (Penar Musaraj)]

Sobald es im Beta-Kanal verfügbar ist, kann ich es testen. Technisch gesehen gibt es keinen Grund, warum es nicht funktionieren sollte, sofern ChromeOS (wie Android, iOS, macOS usw.) die Media-Query prefer-color-scheme unterstützt.

Ich habe es gerade auf einem Chromebook im Beta-Kanal ausprobiert. Es funktioniert gewissermaßen, ist aber noch nicht poliert. Ich konnte den Dunkelmodus für alle Webinhalte erzwingen, einschließlich Discourse-Seiten (ich habe try.discourse.org getestet). Es scheint jedoch nicht möglich zu sein, den Webinhalt umzuschalten, wenn das Betriebssystem zwischen Dunkel- und Hellmodus wechselt. Beim Herumprobieren landete ich ziemlich oft in einem hybriden Zustand, bei dem Teile der Benutzeroberfläche den Hellmodus und andere Teile den Dunkelmodus verwenden.

Für andere, die dies ausprobieren möchten, gehen Sie zu chrome://flags, suchen Sie nach „Dark“ und aktivieren Sie „Dark/light mode of system UI“ und „Force Dark Mode for Web Contents“.

[manuel (Manuel Kostka)]

Wir haben ein helles und ein dunkles Theme. Das dunkle Theme rendert alles so, wie wir es möchten, einschließlich Tag-Symbolen und Vorschauen für Themen. Allerdings weist das dunkle Farbschema bei der Verwendung dieser Add-ons einige Fehler auf. Ich frage mich nur: Warum kann man nicht ein Standard-Theme für den automatischen Dunkelmodus festlegen, anstatt ein Standard-Farbschema? Das Theme scheint deutlich bessere Anpassungsmöglichkeiten zu bieten als das Farbschema.

[pmusaraj (Penar Musaraj)]

@manuel

Aber das dunkle Farbschema hat bei der Verwendung dieser Add-ons einige Fehler.

Ich vermute, du meinst, dass es beim Plugin für Themen-Vorschauen einige Fehler im Dunkelmodus gibt? Wenn ich auf deiner Benutzerseite auf die Website klicke, sehe ich tatsächlich, dass einige Hover-Farben im Dunkelmodus falsch sind. Vielleicht muss das Plugin für Themen-Vorschauen ein kleines Update erhalten, um den Dunkelmodus besser zu unterstützen (es gibt einen Leitfaden für Plugin-Entwickler). Falls ja, halte ich es für sinnvoll, das Problem im entsprechenden Thema des Plugins zu melden.

@manuel

Warum kann man nicht ein Standardthema für den automatischen Dunkelmodus festlegen, anstatt ein Standardfarbschema? Das Thema scheint viel bessere Anpassungsmöglichkeiten zu bieten als das Farbschema.

Wir können Themes nicht on-the-fly wechseln. Themes können benutzerdefinierten JavaScript-Code enthalten, und es ist nicht möglich, den JavaScript-Code ohne Neuladen der Seite zu wechseln.

[Alex_P]

@pmusaraj

Manche Benutzer möchten möglicherweise nicht automatisch zu einem dunklen Farbschema wechseln, wenn ihr Browser im Dunkelmodus ist. Sie können diese Funktion deaktivieren, indem sie die Option „Automatisches dunkles Farbschema aktivieren“ im Bildschirm Einstellungen > Oberfläche deaktivieren:

hm, ich sehe es in der neuesten Version nicht.

[pmusaraj (Penar Musaraj)]

Richtig, das Kontrollkästchen wird nur angezeigt, wenn genau ein dunkles Farbschema verfügbar ist. Wir haben kürzlich WCAG-kompatible Schemata eingeführt, wodurch die Benutzeroberfläche unter Farbschemata in Ihrem Screenshot zwei Dropdown-Menüs anzeigt.

Benutzer, die den automatischen Dunkelmodus deaktivieren möchten, können auf das Dropdown-Menü „Dunkelmodus“ klicken und „Wie im normalen Modus“ auswählen.

[littleviolette]

[quote=“pmusaraj, Beitrag:1, Thema:161593”]
Einige Benutzer möchten nicht automatisch auf ein dunkles Farbschema umschalten, wenn ihr Browser im Dunkelmodus ist. Sie können diese Funktion deaktivieren, indem sie die Option „Automatisches dunkles Farbschema aktivieren

[tobiaseigen]

@pmusaraj

Du kannst deine Discourse-Seite jetzt so einrichten, dass sie automatisch das Farbschema wechselt, wenn das Gerät des Benutzers im Dunkelmodus ist. Für eine schnelle Vorschau gehe zur Instanz try.discourse.org und schalte den Dunkelmodus deines Geräts ein und aus, um diese neue Funktion live zu sehen. (Diese Funktion ist auf meta noch nicht aktiviert.)

Ist das immer noch der beste Weg, um diese Funktion zu testen? Ich sehe keine Änderung am Theme auf try, wenn ich mit meinem Chromebook dorthin gehe und den Dunkelmodus ein- bzw. ausschalte. Selbst ein Neuladen der Webseite bringt nichts. Ich verwende die neueste Version von ChromeOS. Ich habe auch versucht, ein Testkonto zu erstellen und das Gleiche durchzuführen, ohne dass sich etwas änderte.

Ich habe auch auf anderen von mir genutzten Seiten nachgesehen, darunter selbstgehostete und Teams, und konnte nicht erreichen, dass sich das Farbschema automatisch entsprechend der Dunkelmode-Einstellung meines Geräts ändert.

P.S. – Die Screencast-Funktion in ChromeOS ist toll!

[codinghorror (Jeff Atwood)]

Es funktioniert also auf Windows und iOS, aber nicht auf ChromeOS? Das zeigen die Tests? Das lässt mich vermuten, dass ChromeOS vielleicht aktualisiert werden muss oder sich nicht ganz so verhält wie alle anderen? Hast du dazu Gedanken, @pmusaraj?

[pmusaraj (Penar Musaraj)]

Ja, das ist eindeutig ein Problem mit ChromeOS. Es funktioniert auf allen Betriebssystemen, die den Dunkelmodus unterstützen, also macOS, Windows, iOS, Android und verschiedenen Linux-Distributionen. Wir können hier leider nichts tun.

[anon73664359]

@pmusaraj

(Diese Funktion ist auf Meta noch nicht aktiviert.)

Könnte sie jetzt vielleicht aktiviert werden?

[codinghorror (Jeff Atwood)]

Hmm, guter Punkt. Wie testen wir das @pmusaraj auf Meta? Ich habe den „Dunkelmodus

[pmusaraj (Penar Musaraj)]

Ja, dies ist auf Meta noch nicht aktiviert, da wir hier viele Themes aktiviert haben, die jeweils für ein bestimmtes Farbschema ausgelegt sind. Außerdem haben wir den Theme-Umschalter im Hamburger-Menü, der nicht gut mit Farbschemata funktioniert.

[codinghorror (Jeff Atwood)]

Ah, ich verstehe. Funktioniert es mit einer Standardinstallation von Discourse? Kann ich es für https://discourse.codinghorror.com/ zum Laufen bringen?

[pmusaraj (Penar Musaraj)]

Ja, es funktioniert bei einer Standardinstallation. Es funktioniert beispielsweise auf https://try.discourse.org.

Auf https://discourse.codinghorror.com/ müssen Sie möglicherweise die Einstellung umschalten (standardmäßig ist sie auf „Keine

[codinghorror (Jeff Atwood)]

Ah, verstehe. Meine Installation ist ziemlich alt und hatte nur ein Farbschema, nämlich Hell. Ich habe ein neues Farbschema basierend auf dem Standard-Dark-Modus hinzugefügt, und das hat funktioniert – ich kann bestätigen, dass das Umschalten der Dunkel- und Hell-Farbschemata in den Windows-Einstellungen Discourse nun automatisch beeinflusst!

Aber funktioniert das bei einer neuen Discourse-Installation von Anfang an? Hoffentlich ja?

[pmusaraj (Penar Musaraj)]

Das stimmt, es gibt einige standardmäßig hinzugefügte Farbschemata (Hell, Dunkel, WCAG Hell, WCAG Dunkel). Die Einstellung ist jedoch standardmäßig deaktiviert; neue Administratoren müssen sie suchen und aktivieren.

[codinghorror (Jeff Atwood)]

Sollten wir uns vielleicht zum Ziel setzen, dass diese Einstellung in diesem Release standardmäßig aktiviert ist? Solange wir in der dunklen Version standardmäßig Logos mitliefern, sollte das in Ordnung sein?

[Kchalk]

Diese Funktion ist so nützlich, danke, dass sie im Kern enthalten ist.

Ich habe eine GIF erstellt, um sie unter Windows zu demonstrieren. Discourse schaltet sofort um, schneller als das Betriebssystem selbst

Weitere Details dazu findest du auf meiner Instanz, falls du Interesse hast.

https://forums.chalk.sg/t/prefer-a-dark-theme-try-out-dark-mode/110/2

[JimPas]

@codinghorror

Kann ich das mit https://discourse.codinghorror.com/ zum Laufen bringen?

@codinghorror

Ich kann bestätigen, dass das Umschalten der dunklen und hellen Farbschemata in den Windows-Einstellungen jetzt automatisch Discourse beeinflusst!

Jetzt kann ich doppelt so viel lesen.