Dark-/Light-Modus Umschalter

[Discourse]

Diese Theme-Komponente ist veraltet. Siehe Dark/light mode toggle now available in core

|||
-|-|-|
| Zusammenfassung | Dark/Light Mode Toggle fügt einen klickbaren Umschalter für das Farbschema im Hamburger-Menü hinzu. Der Umschalter wechselt zwischen einem hellen oder dunklen Farbschema für ein Thema.
| Repository-Link | https://github.com/discourse/discourse-color-scheme-toggle
|Neu bei Discourse Themes? | Anfängerleitfaden zur Verwendung von Discourse Themes

Diese Theme-Komponente installieren

Da dies eine #offizielle Theme-Komponente ist, die vom Discourse-Team gepflegt wird, können Support, Bug, UX und #feature-Anfragen in den entsprechenden Kategorien hier auf Meta gestellt und mit dem entsprechenden Tag für die Theme-Komponente versehen werden. Klicken Sie auf einen der folgenden Links, um eine zu starten.

 Support  Bug  UX  Feature

Funktionen

Diese Komponente ermöglicht ein Umschalten zwischen dunklem und hellem Modus auf Ihrem Discourse-Forum. Sie wechselt auch automatisch, wenn Sie Ihr Betriebssystem in einen anderen Modus als Ihr aktuelles Farbschema ändern.

Sie können wählen, ob der Umschalter in der neuen Discourse-Seitenleiste oder im Header neben anderen Symbolen angezeigt werden soll.

Seitenleiste

Header

Wichtige Schritte

Damit dies ordnungsgemäß funktioniert, müssen mindestens 2 Farbschema-Auswahlen in Ihrem Bereich /admin/customize/colors aktiviert sein. Mindestens zwei Farben müssen die Option color scheme can be selected by users aktiviert haben.

Ein Standard-Farbschema muss für den Dunkelmodus festgelegt werden: /admin/site_settings/category/basic?filter=dark

Sobald dies geschehen ist, sollten Benutzer in der Lage sein, zwischen zwei Farbschemata als ihre hellen und dunklen Voreinstellungen in ihrem Benutzereinstellungen-Interface-Menü zu wählen.

Einstellungen

Name	Beschreibungen
svg icons
add color scheme toggle to header	Fügt eine Schaltfläche zum Umschalten des Farbschemas zum Website-Header hinzu

Übersetzung	Standard
toggle_button_title	Farbschema umschalten

Von uns gehostet? Theme-Komponenten sind für unsere Standard-, Geschäfts- und Enterprise-Pläne verfügbar.

[chrisbagsrocks]

Funktioniert dies nur mit der Benutzereingabe, indem man zu den Präferenzen geht und sie aktiviert? Es wäre viel besser, wenn es eine websiteweite Implementierung anstelle einer benutzerbasierten wäre.

[jordan.vidrine]

Ein Administrator würde diese Komponente für die gesamte Website aktivieren.

Je nachdem, was der Administrator, der die Komponente eingerichtet hat, eingestellt hat, befindet sich der Schalter entweder im Hamburger-Menü des Benutzers oder in der Kopfzeile des Forums. Alle Benutzer können dies nutzen, sobald es von einem Administrator aktiviert wurde.

[chrisbagsrocks]

Entschuldigung, ich glaube, ich war mit meiner Frage nicht klar. Wenn ich mir Ihr Installations-Tutorial ansehe, sieht es so aus, als ob nach der Aktivierung auf der Admin-Seite, entweder im Hamburger-Menü oder in der Kopfzeile, jeder einzelne Benutzer zu seinen Einstellungen gehen und die hellen/dunklen Farbschemata aktivieren/hinzufügen muss. Andernfalls funktioniert es nicht für einen neuen Benutzer / jemanden, der nicht angemeldet ist. Meine Frage lautet also:

Ist es möglich, das Farbschema standortweit und nicht benutzerbezogen zu implementieren?

Ihr Foto ist zur Referenz unten angebracht

[jordan.vidrine]

Ich glaube, ein helles und ein dunkles Schema werden automatisch zugewiesen, sobald ein Administrator dies aktiviert. Von dort aus kann ein Benutzer bearbeiten, welche dunklen und hellen Farbschemata als persönliche Präferenz verwendet werden.

Möglicherweise müssen Sie hier auch eine Auswahl hinzufügen: /admin/site_settings/category/basic?filter=dark

Ich habe die Anweisungen aktualisiert, um diese Ergänzung widerzuspiegeln. Entschuldigung für die Verwirrung!

[bekircem]

Es scheint, dass es nicht richtig funktioniert, wenn das Standard-Farbschema dunkel ist. Wie können wir das anpassen?

Wenn das Standard-Farbschema dunkel ist, funktioniert der Schalter nicht, es sei denn, ein Benutzer hat das helle Farbschema in den Benutzeroberflächeneinstellungen ausgewählt.

[jordan.vidrine]

Hmmm, ich glaube, das passiert, weil ich die prefers-dark-Benutzerschemaeinstellungen basierend auf den Browser- und Systemeinstellungen überprüfe.

Können Sie Ihre Inspektorkonsole überprüfen und sehen, ob etwas angezeigt wird, wenn Sie versuchen, den Schalter zu verwenden?

Ich muss das vielleicht untersuchen.

[poyrazdursuncan (Dursun Can)]

Warnungen unter domain.com/logs;

Dark-Light Toggle theme/component wirft Fehler

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

Hier auch. Die Dunkelheitskomponente wirft Fehler.

[jordan.vidrine]

@poyrazdursuncan

Dark-Light Toggle theme/component wirft Fehler

@Mr.X_Mr.X

Bei mir auch. Dark light component wirft Fehler.

Hmmm… Ich bin mir nicht sicher, woher das kommt, da ich keinen Code habe, der das aussenden sollte. Die einzige Kommunikation, die ich für einen Fehler habe, ist hier:

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

Können Sie hier Ihre Website verlinken, wenn möglich? Ist Ihre Instanz auf dem neuesten Stand?

[Arta_S (Arta)]

Hallo,

Ich habe ein Problem. Nach dem Hinzufügen des Themas werden die Toggle-Icons nicht im Hamburger-Menü hinzugefügt. Sie existieren nicht einmal im reinen Code. Außerdem Demo hier funktionieren die Schaltflächen nicht. Das bedeutet, sie wechseln nicht zwischen hellem und dunklem Thema.

Hat sonst noch jemand das gleiche Problem?

[jordan.vidrine]

Können Sie die Entwicklertools-Konsole überprüfen und sehen, ob etwas damit zusammenhängt? Ich sehe, dass die Symbole auf der Demoseite einwandfrei funktionieren.

[Arta_S (Arta)]

Hier ist das Video:

Mein Hauptproblem ist, dass ich diese Optionen in meinem Forum im Hamburger-Menü gar nicht sehe:

[jordan.vidrine]

Sie haben den Tab console in Ihrem Screencast nicht geöffnet, daher ist es schwer zu erkennen, ob Fehler auftreten.

Haben Sie sichergestellt, dass Sie jeden Schritt im ursprünglichen Beitrag zu diesem Thema befolgt haben?

Mindestens 2 Farbschema-Optionen müssen in Ihrem /admin/customize/colors-Bereich aktiviert sein
Ein dunkles Thema muss aktiviert sein unter: /admin/site_settings/category/basic?filter=dark

Und haben Sie als Benutzer zwei Farbschemata ausgewählt, eines für hell und eines für dunkel, in Ihren Benutzereinstellungen?

[Arta_S (Arta)]

@jordan.vidrine

Haben Sie sichergestellt, dass Sie jeden Schritt im ursprünglichen Beitrag zu diesem Thema befolgt haben?

Hallo,

Ja, das wurde korrekt ausgeführt. Heute wird alles korrekt angezeigt. Dies lag an Cookies. Es war seltsam, dass es in anderen Browsern (in denen ich das Forum noch nie besucht hatte) ebenfalls fehlte. Jetzt ist alles korrekt. Vielen Dank und Entschuldigung für die Verwirrung, die ich verursacht habe.

Das Einzige ist, dass alle Benutzer, einschließlich Gäste, den Schalter in der Kopfzeile sehen können. Aber als Administrator, wenn ich angemeldet bin, kann ich die Schalter nicht sehen. Ist das beabsichtigt? Könnte das Server-Cache oder so etwas sein?

[jordan.vidrine]

Hmm, das ist interessant. Haben Sie in Ihren Benutzereinstellungen ein dunkles und ein helles Farbschema ausgewählt?

Und verwenden Sie das Theme, bei dem die Komponente installiert ist?

[Arta_S (Arta)]

Ich musste zu meinem Profil gehen und diese Option (Automatische Dunkelmodus-Farbschema aktivieren) aktivieren, damit sie im Header erscheint. Wahrscheinlich habe ich herumgespielt und dieses Kontrollkästchen übersehen.

[agungor]

Ich liebe diese Komponente! Aber ich habe ein kleines Problem.

Es scheint, dass die Komponente nur funktioniert, wenn die Option „Automatische Dunkelmodus-Farbschema aktivieren“ aktiviert ist. Mein Problem tritt auf, wenn die Option aktiviert ist und die Systemeinstellung auf Dunkelmodus eingestellt ist (d. h. bevorzugtes Farbschema: dunkel).

In dem obigen Szenario passiert nichts, wenn ich versuche, über Einstellungen > Oberfläche > Thema zu einem hellen Thema zu wechseln, was für mich in Ordnung ist. Vermutlich, da meine Systemeinstellung bereits auf Dunkelmodus eingestellt ist, überschreibt das Wechseln zu Hellmodus in Discourse dies nicht.

Wenn ich dasselbe mit der Komponente „Dunkel-/Hellmodus-Umschalter“ mache und meine Theme-Einstellung in Discourse auf Hell steht, lässt mich der Umschalter tatsächlich zu Hellmodus wechseln (was meiner Meinung nach noch besser ist), aber das Website-Logo im Header bleibt im Dunkelmodus und ist im Hellmodus schwer zu erkennen. Wenn ich den Inspektor betrachte, sehe ich, dass das Element so aussieht:

<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>

Mir ist aufgefallen, dass der Teil media=“(prefers-color-scheme: dark)” vorhanden ist, obwohl wir uns jetzt im Hellmodus befinden, der durch den Umschalter eingestellt wurde.

Ich sollte hinzufügen, dass das Website-Logo normalerweise problemlos zwischen Hell- und Dunkelmodus wechselt, wenn die Option „Automatische Dunkelmodus-Farbschema aktivieren“ in Discourse deaktiviert ist. Dies verhindert jedoch, dass der Dunkel-/Hellmodus-Umschalter angezeigt wird

Außerdem, wenn meine Theme-Einstellung in Discourse über Einstellungen > Oberfläche > Thema auf Dunkel eingestellt ist und meine Systemeinstellung ebenfalls dunkel ist, wechselt der Umschalter nicht zwischen Hell und Dunkel – er bleibt immer im Dunkelmodus.

Idealerweise würde ich bevorzugen, dass die Komponente „Dunkel-/Hellmodus-Umschalter“ so funktioniert, wie sie es jetzt tut, aber dass das Website-Logo im Header der aktuell aktiven Hell-/Dunkel-Einstellung folgt und nicht dem vom Benutzer bevorzugten Farbschema des Systems.

[MattiaB (Mattia)]

@agungor

Wenn ich dasselbe mit der Dark/Light Mode Toggle-Komponente mache und meine Theme-Präferenz in Discourse auf Light eingestellt ist, lässt mich der Schalter tatsächlich in den Light-Modus wechseln (was meiner Meinung nach noch besser ist), aber das Website-Logo im Header bleibt im Dark-Modus und ist im Light-Modus schwer zu erkennen.

Gleich hier! Hast du eine Lösung gefunden?

Ich bin kein Frontend-Entwickler, habe aber einiges an Debugging betrieben:
Im Dark-Modus, wie mein Computer eingestellt ist, sieht der HTML-Code für das Logo so aus:

Und das Logo sieht gut aus, der Dark-Modus funktioniert vollständig. Beim Umschalten in den Light-Modus wird das Theme hell, aber das Logo verschwindet (das dunkle Logo bleibt).

So sieht der HTML-Code aus:

Es gibt eine zusätzliche Zeile, <source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)">, die das korrekte Logo am Laden “hindert”. Wenn ich diese Zeile mit Inspect Element entferne und nur <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36"> übrig lasse, erscheint das korrekte Logo.

Ich hoffe, diese Informationen waren nützlich.

[agungor]

@MattiaB

Gleiches hier! Hast du eine Lösung gefunden?

Ich fürchte nicht. Ich habe schließlich die Hintergrundfarbe des Headers so geändert, dass der Wechsel des Logos zwischen hellem und dunklem Modus keine Rolle mehr spielte