« Forum zum Forum  |

·gelöst· Dark Mode CSS kommt zu spät

Teilen: facebook    whatsapp    email
 1  2 ...... 3 
  •  christoph1703
30.4. - 18.9.2024
55 Antworten | 12 Autoren 55
55
Hallo @­energiesparhaus,

zuerst mal ein fettes DANKE dafür, dass ihr diese Plattform zur Verfügung stellt!

Mir ist aufgefallen, dass ihr das CSS für den Dark Mode erst im JS ladet. Das führt dazu, dass bei jedem Seitenaufruf zuerst alles hell gerendert wird und erst später auf dunkel umgeschaltet wird. Das ist gerade am Abend unangenehm, wenn man bei fast jedem Seitenwechsel von einem Lichtblitz geblendet wird.

Könnt ihr da vielleicht was machen und das dunkle CSS ins Haupt-CSS integrieren? Vielleicht sogar mit dem prefers-color-scheme media query?

  •  energiesparhaus
  •   Dieses Logo kennzeichnet einen Beitrag des energiesparhaus.at-Teams
30.4.2024  (#1)
Ja das passt nicht. Die Funktion wurde mangels Nutzung recht stiefmütterlich behandelt. Wir werden das verbessern. 

1
  •  christoph1703
30.4.2024  (#2)
Danke für die schnelle Antwort!

1
  •  Hedensted
  •   Bronze-Award
1.5.2024  (#3)
Bei mir erstrahlt das Forum seit heute im DarkMode. Nur hätt ich gern das blitzeweiß zurück, finde jedoch den Schalter nicht. 
Könnte ihr kurz angeben, wo der zu finden ist?

1
  •  Pedaaa
  •   Gold-Award
1.5.2024  (#4)
bei mir ists am Rechner hell, am Handy dark...

1
  •  Muehl4tler
  •   Bronze-Award
1.5.2024  (#5)
Wie bekomm ich den Darkmode wieder weg?
Android Firefox

1
  •  christoph1703
1.5.2024  (#6)
Habt ihr eure Handys global auf dark mode eingestellt? Bei mir folgt das Forum der Einstellung in Android, wie die meisten Apps.
Der Schalter im Forum zum overriden ist nicht mehr da wies ausschaut...

1
  •  aspire77
2.5.2024  (#7)
Wie bekommt man den wieder weg? Das sieht fürchterlich aus.

1
  •  christoph1703
2.5.2024  (#8)
Ohje, was hab ich da losgetreten? Bin ich echt der Einzige, der das aktiv hatte?

@­energiesparhaus vielleicht doch wieder reverten und als schnellen Hack alle Links auf AJAX upgraden? https://htmx.org/docs/#boosting

Will da nicht für alle anderen die UX verschlechtern...

1
  •  Solarbuddys
  •   Gold-Award
2.5.2024  (#9)
Hier das selbe 

iphone , kein genereller Darkmode
Die Forumsseite ist fast nicht zu lesen im Darkmode - bitte Auswahlmoeglichkeit oder Retoursetzen

1
  •  Gemeinderat
2.5.2024  (#10)
Habe weiterhin light mode... auch am iPhone, habe nie was verändert, auch unter iOS nicht. 

1
  •  tomsl
  •   Bronze-Award
2.5.2024  (#11)

zitat..
christoph1703 schrieb: Ohje, was hab ich da losgetreten? Bin ich echt der Einzige, der das aktiv hatte?

Nope, hab's am Handy auch im Einsatz. Am Desktop normalerweise im Light Mode, aber seid heute erstrahlt es dort auch dunkel. Interessanterweise finde ich am Desktop die Auswahlmöglichkeit (Hell/Dunkel) gar nicht.


1
  •  stefano
  •   Bronze-Award
2.5.2024  (#12)
Bei mir ist auch alles im Dark-Mode. Grundsätzlich nutze ich bei den meisten Seiten/Programmen den Dark-Mode, aber hier ist der Light-Mode besser lesbar und wurde bisher genutzt. Könnt ihr die Auswahl wieder zurückbringen oder den Dark-Mode verbessern?

1
  •  Solarbuddys
  •   Gold-Award
2.5.2024  (#13)

zitat..
Gemeinderat schrieb:

Habe weiterhin light mode... auch am iPhone, habe nie was verändert, auch unter iOS nicht.

Willst Handys tauschen bitte 😀


1
  •  energiesparhaus
  •   Dieses Logo kennzeichnet einen Beitrag des energiesparhaus.at-Teams
2.5.2024  (#14)
So, wieder zurückgestellt. Offensichtlich gibt es viele User die das Handy im Darkmode betreiben aber diese Seite nicht im Darkmode haben wollen. Ab sofort kann man das wie gehabt bei den Einstellungen wieder festlegen.

@­christoph1703 : Damit können wir uns nicht auf prefers-color-scheme verlassen und müssen vor dem Laden der Seite abfragen, ob der User dieses Attibut verwenden möchte oder eigene Einstellungen bevorzugt. Wir müssen also vor dem Laden der Seite das entsprechende Cookie auslesen und können dann erst wenn erforderlich das entsprechende CSS ergänzen. Das löst offensichtlich bei Ihnen (wir können das am iPhone nicht beobachten) ein Timing-Problem aus und die Seiten blitzen weiß durch. Unser Ansicht nach kann das aber nicht durch das vorgeschlagene "Boosting" gelöst werden. AJAX Requests erfolgen asynchron und somit würde das Laden des erforderlichen CSS-Codes langsamer erfolgen als bisher (obwohl die Seite selbst evtl. früher steht, aber selbst das weiß man nicht sicher). Derzeit laden wir das CSS bereits vor dem Seitenaufbau im <HEAD>, allerdings erfordert dies aktuell einen zusätzlichen Roundtrip beim Laden, was klarerweise nicht optimal ist.
Serverseitig speichern wäre natürlich optimal, aber es muss ja pro Gerät unterschiedlich handhabbar sein. Wir werden drüber nachdenken.

1
  •  purrtastic
  •   Bronze-Award
2.5.2024  (#15)
Ich bin überzeugter Darkmode user (Dank eines OLED Schirms der sonst aus lauter Farbbrillianz schon in den Augen weh tun kann), und muss sagen aber habe Darkmode CSS des Forums abgedreht, weil mit Dark Reader auf normales CSS die Farbgebung besser ist als eure Farbausewahl bei Darkmode CSS.

1
  •  christoph1703
2.5.2024  (#16)
@­energiesparhaus  Das Boosting bewirkt, dass eben nicht alles neu geladen wird. Es lädt nur das HTML neu und ersetzt den Body. Alles andere bleibt unangetastet - das richtige CSS ist also schon da, bevor die neue Seite geladen wird. Ist aber natürlich nur ein Workaround.
Soweit ich das sehe, sind 3 Requests notwendig, um das Theme zu laden:
- die eigentliche Seite (HTML)
- base.js, und dann erst davon getriggert:
- dark.css
Wenn das Theme clientseitig gewechselt werden soll, könnte man das dahingehend optimieren, dass der entsprechende Teil aus base.js im HTML eingebettet wird, ebenso das dark.css. Dann ist die Netzwerklatenz nicht mehr relevant.
Die "perfekte" Alternative wäre natürlich serverseitig gleich das richtige Theme mitschicken - hängt halt vom Backend ab, ob das einfach geht. Speichern müsste man das nicht am Server, dafür wird ja das Cookie mitgeschickt.


1
  •  purrtastic
  •   Bronze-Award
2.5.2024  (#17)
Wäre dir richtige Methode nicht einfach 
@media (prefers-color-scheme: dark) {
}
Am Ende des CSS (so dass es alles vorher überschreibt?)

1
  •  christoph1703
2.5.2024  (#18)
@­purrtastic grundsätzlich ja (muss auch nicht am Ende sein). Das nimmt dann aber die Systemeinstellung. Viele haben anscheinend ihr System dunkel, wollen aber die Seite trotzdem hell haben. Das geht damit nicht soweit ich weiß.

1
  •  energiesparhaus
  •   Dieses Logo kennzeichnet einen Beitrag des energiesparhaus.at-Teams
2.5.2024  (#19)
Genau. Dieser Versuch von gestern hat keine Begeisterung ausgelöst 😅

1
  •  purrtastic
  •   Bronze-Award
2.5.2024  (#20)

zitat..
christoph1703 schrieb:

@­purrtastic grundsätzlich ja (muss auch nicht am Ende sein). Das nimmt dann aber die Systemeinstellung. Viele haben anscheinend ihr System dunkel, wollen aber die Seite trotzdem hell haben. Das geht damit nicht soweit ich weiß.

Dann wär mMn aus Usersicht die Optionen: default (nimmt perfers-color-scheme), override light, override dark zu bevorzugen.

Und zur CSS Reihenfolge, ja kann man ja beliebig macht, wann man widersprechend Regeln hat zählt aber die letztere, daher machen ja viele zuerst light design, und dann dark design hinter der @media Bedingung.


1
  •  energiesparhaus
  •   Dieses Logo kennzeichnet einen Beitrag des energiesparhaus.at-Teams
2.5.2024  (#21)
Ja so ist es jetzt eh wieder. Mit dem Schönheitsfehler, dass ein Cookie ausgelesen werden muss, und dass das eben diese Zeitverzögerung mit sich bringt, die fallweise zum Aufblitzen der weißen Seite führt. Wir werden das serverseitig lösen.

1
 1  2 ...... 3 


Beitrag schreiben oder Werbung ausblenden?
Einloggen

 Kostenlos registrieren [Mehr Infos]


next