Hallo, das in diesen beiden Themen beschriebene Problem:
tritt bei mir (teste die neueste/Testversion von gehostetem Discourse) immer noch auf.
@mk0r Ich kann dieses Problem hier auf Meta nicht reproduzieren. Ich verwende hier das Grey Amber-Theme/Farbschema, das nicht das Standard-Theme für Meta ist:
Und das theme-color-Meta-Tag hat für mich die richtige Farbe:
<meta name="theme-color" content="#36393e">
#36393e ist die Hintergrundfarbe des Headers des Grey Amber-Schemas. Wenn ich Meta in einem Inkognito-Fenster ohne Anmeldung öffne, hat das theme-color-Meta-Tag den Header-Hintergrund des Standard-Farbschemas (des Light-Schemas):
<meta name="theme-color" content="#ffffff">
Haben Sie versucht, den Browser-Cache/Cookies für Ihre Website zu löschen? Wenn das nicht hilft, können Sie versuchen, dieses Problem hier auf Meta zu reproduzieren und die Schritte zur Reproduktion des Problems mitteilen?
2 „Gefällt mir“
Vielen Dank für die Überprüfung, ich kann es reproduzieren – es hängt speziell mit dem Dunkelmodus zusammen.
theme-color bleibt gleich wie im Standard-/Hellmodus, zumindest für mich, hier auf Meta und auf meiner Installation.
Ich habe sogar gerade versucht, dies zum head hinzuzufügen:
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
Es wird in der Quelle angezeigt, aber es hat keine Auswirkungen, vielleicht weil das erste Meta-Tag nicht prefers-color-scheme: light angibt?
Das Hauptproblem für mich ist, dass die helle Statusleiste schlecht mit der dunklen Seite auf dem Handy kollidiert und sie auf dem Scroll-to-Refresh hellweiß ist.
Ich habe mich gerade angemeldet, um zu kommentieren, da ich glaube, dass dies dasselbe Problem ist, das ich habe.
Wenn ich die progressive Web-App (unter Android 13, die Option “App installieren”, wenn ich ein Discourse-Forum in Chrome aufrufe, in diesem Fall https://llllllll.co/) verwende, spiegelt die App korrekt die Systemeinstellungen für den dunklen Modus wider, aber die Statusleiste bleibt im hellen Modus. Dieses Problem tritt in Chrome nicht auf. Siehe Bild unten: App links, Chrome-Browser rechts.
2 „Gefällt mir“
Schade, dass das keine Beachtung findet 
Ich bin nicht technisch genug, um einen Pull Request zu schreiben, aber ich glaube, das muss eine ziemlich einfache Lösung sein? Vielleicht wirkt es pingelig, aber es gibt ästhetische und funktionale Gründe, warum ich hoffe, dass dies behoben werden kann 
Ich habe mir das letzte Woche noch einmal angesehen und konnte diesen Fehler mit den folgenden Schritten reproduzieren:
-
Konfigurieren Sie Ihr Betriebssystem so, dass es den Dunkelmodus verwendet (in Windows 11 geschieht dies unter Einstellungen → Personalisieren → Farben → Wählen Sie Ihren Modus).
-
Wählen Sie in Ihren Discourse-Einstellungen unterschiedliche Farbschemata für den normalen und den Dunkelmodus aus und laden Sie die Seite neu.
-
Nun sollte das für den Dunkelmodus ausgewählte Farbschema in der Benutzeroberfläche wirksam werden (wie erwartet), aber das
theme-color-Metatag enthält den Wert derheader_background-Farbe des Farbschemas, das Sie für den Hellmodus ausgewählt haben, obwohl es eigentlich der Dunkelmodus sein sollte.
Dies ist etwas schwierig zu beheben, da wir auf der Serverseite – wo alle Metatags gerendert werden – keinen Kontext darüber haben, ob der Client/Browser das helle oder dunkle Farbschema verwendet. Wir fügen einfach die Farbdefinitionen für beide Schemata hinzu, und der Client/Browser wählt dann dasjenige aus, das den Präferenzen des Benutzers gemäß der prefers-color-scheme-Media-Query entspricht.
Es sieht jedoch so aus, als ob das theme-color-Metatag ein media-Attribut akzeptiert, sodass wir ein weiteres theme-color-Metatag für das dunkle Schema mit media auf (prefers-color-scheme: dark) setzen können. Ich werde versuchen, dies diese Woche zu erledigen.
5 „Gefällt mir“
Ich glaube, es könnte der Fall sein, dass, wenn im ersten Meta-Tag kein heller oder dunkler Modus angegeben ist und im zweiten Meta-Tag der dunkle Modus angegeben ist, der dunkle Modus immer noch vom ersten übernommen wird. Daher denke ich, dass man beide Tags angeben muss, sowohl für den hellen als auch für den dunklen Modus.
2 „Gefällt mir“
Ja, ich denke, meine Änderung wird dazu führen, dass das Meta-Tag für das helle Schema media="(prefers-color-scheme: light)" und das für das dunkle Schema media="(prefers-color-scheme: dark)" hat, und Browser sollten in der Lage sein, dasjenige auszuwählen, das den Präferenzen des Benutzers entspricht.
3 „Gefällt mir“
FYI @mk0r Ich habe dieses Problem vor 2 Tagen behoben in:
3 „Gefällt mir“
Danke 
Es scheint wirklich großartig zu sein, aber leider funktioniert es für mich nicht. Ich denke, media="all" überschreibt media="(prefers-color-scheme: dark") auch im Dark Mode?
1 „Gefällt mir“
Hmmm, können Sie mir mitteilen, wie Sie das testen und welchen Browser Sie verwenden?
1 „Gefällt mir“
Oh ja, sicher, Entschuldigung, ich habe es vergessen.
Ich habe es ausprobiert auf:
Android 12
Chrome 106.0.5249.126 PWA
MacOS 12.4
Chrome 105.0.5195.125 PWA
1 „Gefällt mir“
Ich habe mir die auf GitHub gemochte Korrektur angesehen und glaube, dass das Problem dasjenige sein könnte, das in meiner vorherigen Nachricht beschrieben wurde: Meta theme-color is not respecting current color scheme - #9 by mk0r
Ich bewege mich vielleicht weit außerhalb meines technischen Wissens, aber ich habe mir gerade diese Zeilen angesehen:
it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with media=(prefers-color-scheme: dark)" do
expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
<meta name="theme-color" media="all" content="#abcdef">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
HTML
Ich glaube, dass meta name="theme-color" media="all" Vorrang vor meta name="theme-color" media="(prefers-color-scheme: dark)" hat, auch wenn der Benutzer im Dark Mode ist.
Siehe hier:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
und
https://web.dev/learn/design/theming/
Ich denke, die final gerenderten Seiten müssen die folgenden Zeilen enthalten, damit es richtig funktioniert:
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
Wobei die Hex-Werte durch die Werte des gewählten Farbschemas ersetzt würden.
Wenn die Installation/das Theme kein separates Dark-Mode-Farbschema hat, wären die Werte einfach die gleichen.
Mir ist bewusst, dass das etwas kleinlich ist, aber es macht wirklich einen Unterschied, daher wird diese Korrektur sehr geschätzt. Ich denke, die Alternative wäre, dass wir theme-color für all oder sowohl für dunkle als auch für helle Modi über die Benutzer-Admin-Oberfläche auswählen können. Oder gar kein theme-color zu haben, damit das Gerät einfach die Farbe der Browser-UI festlegt und die Dunkel-/Hell-Präferenz des Benutzers berücksichtigt.
Ich hoffe, das hilft 
2 „Gefällt mir“
FYI @Don und @mk0r, das sollte jetzt wirklich behoben sein:
(Ich bin mir nicht sicher, wer kaden-stytch auf Meta ist, aber wer auch immer du bist, danke! 
)
4 „Gefällt mir“
Ja, danke Jetzt funktioniert es perfekt! 
3 „Gefällt mir“
Dieses Thema wurde nach 2 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr möglich.