Blitz des ungenauen Farbthema (Furz)

Bei der Implementierung eines Dark -Modus -Themas auf einer Website gibt es viel zu überlegen. Wir haben einen riesigen Leitfaden. Es gibt einige sehr kluge schnelle Siege da draußen, aber es gibt auch einige ziemlich schwierige Dinge, die Sie schaffen können. Eines dieser schwierigen Dinge ist, dass es kein dunkler Modus ist, zwischen Dunkel und Licht zu wechseln, sondern wirklich drei Modi, die Sie unterstützen müssen: dunkle , hell und verwenden Systempräferenzen . Dies ähnelt der Funktionsweise von Audioeinstellungen in vielen Apps, mit denen Sie genau die gewünschten Audioeingabe oder -ausgabe oder standardmäßig für die Systempräferenz auswählen können.

CSS und JavaScript können den Systempräferenzwinkel über die API für die bevorzugte Farbscheide verarbeiten. Wenn sich die Benutzerpräferenz jedoch geändert hat und diese Präferenz jetzt von der Benutzerpräferenz unterscheidet, befinden Sie sich auf dem Gebiet von „Flash of Uncyfat Colorthema“ oder Fart. Ok, ok, es ist ein Akronym für die Wange, aber es ist potenziell ein sehbehindertes Problem, also halte ich es. Es ist in der gleichen Weise, dass Fout (Blitz des nicht styierten Textes) für das Laden von Schriftarten bestimmt ist.

Das Speichern einer Benutzerpräferenz bedeutet so etwas wie ein Cookie, ein Lokalstor oder eine Art Datenbank. Wenn der Zugriff auf diese Daten bedeutet, JavaScript, z. B. localStorage.getItem ('Color-Mode-Preference'), dann in Fart-Territorium, da Ihr JavaScript sehr wahrscheinlich nach dem ersten Rendern einer Seite läuft, damit Sie nicht auf unnötig verzögerte Seitenrendern verzögern.

Sie können vor dem Seitenrender auf ein Cookie mit einer serverseitigen Sprache zugreifen, was bedeutet, dass Sie damit etwas wie und den Stil entsprechend ausgeben können, der fart geschickt vermeidet. Dies bedeutet jedoch eine Website, die sogar Zugriff auf eine serverseitige Sprache hat (Jamstack-Websites, zum Beispiel nicht).

Alles, was zu sagen, dass ich Rob Moriesons Artikel über den Dunklen Modus geschätzt habe, weil er sich nicht zu diesem wichtigen Thema befasst. Es geht ganz besonders darum, dies in Next.js zu tun, und verwendet LocalStorage, aber da Next.js JavaScript-gerendert ist, können Sie sie zwingen, die benutzerdeavierte Präferenz als erstes zu überprüfen. Das bedeutet, dass es das erste Mal korrekt rendert (kein Blitz). Sie müssen das serverseitige Rendering ausschalten, damit dies funktioniert, was jedoch ein knorriger Kompromiss darstellt.

Ich bin nicht davon überzeugt, dass es einen guten Weg gibt, Furz ohne serverseitige Sprache oder mit Kraft delayierte Seitenumzüge zu vermeiden.

Das obige ist der detaillierte Inhalt vonBlitz des ungenauen Farbthema (Furz). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!