Flash Of InAccurate ColoR Theme (FART)

Es gibt viel zu bedenken, wenn man ein Dunkelmodus-Theme für eine Website implementiert. Wir haben einen umfangreichen Leitfaden dazu. Es gibt einige sehr clevere schnelle Lösungen, aber es gibt auch einige ziemlich knifflige Dinge zu meistern. Eines dieser kniffligen Dinge ist, dass es sich nicht um einen Dunkelmodus-"Schalter" zwischen dunkel und hell handelt, sondern eigentlich um drei Modi, die Sie unterstützen müssen: dunkel, hell und Systempräferenz verwenden. Dies ähnelt der Funktionsweise von Audioeinstellungen in vielen Anwendungen, die es Ihnen ermöglichen, sehr spezifisch auszuwählen, welchen Audioeingang oder -ausgang Sie verwenden möchten, oder die Systempräferenz zu verwenden.

CSS und JavaScript können den Systempräferenz-Aspekt über die prefers-color-scheme API handhaben, aber wenn die Benutzereinstellung geändert wurde und diese Einstellung nun von der Benutzereinstellung abweicht, befinden Sie sich im Bereich des "Flash of inAccurate coloR Theme" oder FART. Okay, okay, es ist ein Augenzwinkern-Akronym, aber es ist ein potenziell ziemlich visuell störendes Problem, also behalte ich es bei. Es ist im gleichen Sinne, wie FOUT (Flash of Unstyled Text) für das Laden von Schriftarten ist.

Das Speichern einer Benutzereinstellung bedeutet etwas wie einen Cookie, localStorage oder eine Art Datenbank. Wenn der Zugriff auf diese Daten die Ausführung von JavaScript erfordert, z. B. localStorage.getItem('color-mode-preference');, dann befinden Sie sich im FART-Bereich, da Ihr JavaScript sehr wahrscheinlich nach dem ersten Rendern einer Seite ausgeführt wird, es sei denn, Sie verzögern unnötigerweise das Rendern der Seite.

Benutzereinstellung ist "dunkler" Modus, aber die Systempräferenz ist "heller" Modus (oder nicht gesetzt), also wenn die Seite neu lädt, erhalten Sie FART.

Sie können mit einer serverseitigen Sprache auf einen Cookie zugreifen, bevor die Seite gerendert wird, was bedeutet, dass Sie ihn verwenden könnten, um etwas wie <html class="user-setting-dark-mode"> auszugeben und entsprechend zu stylen, was FART geschickt vermeidet, aber das bedeutet eine Website, die überhaupt Zugriff auf eine serverseitige Sprache hat (Jamstack-Websites zum Beispiel nicht).

All das, um zu sagen, dass ich den Artikel von Rob Morieson über Dark Mode geschätzt habe, weil er dieses wichtige Problem nicht scheute. Es geht sehr spezifisch um die Umsetzung in Next.js und verwendet localStorage, aber da Next.js JavaScript-gerendert ist, können Sie es zwingen, die gespeicherte Benutzereinstellung als allererstes zu überprüfen. Das bedeutet, dass es beim ersten Mal korrekt gerendert wird (kein Flash). Sie müssen jedoch das serverseitige Rendering deaktivieren, damit dies funktioniert, was jedoch ein unschöner Kompromiss ist.

Ich bin nicht davon überzeugt, dass es einen guten Weg gibt, FART ohne serverseitige Sprache oder verzögerte Seiten-Renderings zu vermeiden.

Kommentare

Filip Chalupa

# 15. April 2021

Wie schlimm ist das, dass es nicht einmal erwähnt wird?

const theme = localStorage.getItem(‘color-mode-preference’) || ‘system’
document.body.classList.add(`theme-setting-${theme}-mode`)

Chris Coyier

Permalink zu Kommentar# 16. April 2021

Das ist der springende Punkt. Dieses JavaScript wird höchstwahrscheinlich ausgeführt, nachdem die Seite gerendert wurde.
Filip Chalupa

Permalink zu Kommentar# 24. April 2021

Ou. Ich habe vergessen zu erwähnen, dass man das direkt nach dem öffnenden Tag einfügen muss. Entschuldigen Sie bitte.

const theme = localStorage.getItem(‘color-mode-preference’) || ‘system’
document.body.classList.add(`theme-setting-${theme}-mode`)
Filip Chalupa

Permalink zu Kommentar# 24. April 2021

Jetzt sehe ich, dass auch andere das vorschlagen.

Hugh Haworth

# 15. April 2021

Dieses Akronym. Großartig.

Logan Mortimer

# 15. April 2021

Ein trickreicher Weg, dies zu umgehen, könnte die Verwendung eines Service Workers und der Caching-API sein, um die auf Anfrage abgerufene CSS-Datei zu aktualisieren. Das wäre etwas ziemlich Interessantes.

Scott MacDonald

# 15. April 2021

Dies könnte tatsächlich ein guter Anwendungsfall für einen Service Worker sein, besonders wenn Sie ihn bereits verwenden. Wenn jemand explizit eine Präferenz für einen dunklen oder hellen Modus gewählt hat, können Sie seine Netzwerkanfrage für das Haupt-Stylesheet (das die `prefers-color-scheme`-Medienabfragen enthält) abfangen und es durch eine gecachte Version des Stylesheets überschreiben, das nur die Stile für das angegebene Farbschema enthält.

Sébastien LeBlanc

# 15. April 2021

Ich bin mir nicht sicher, ob ich den Teil mit localStorage verstehe. Next.js ist React auf der Serverseite (Node.js), daher sollten Sie Cookies verwenden und nicht localStorage, da dies nur auf der Client-Seite verfügbar ist.

Sébastien LeBlanc

Permalink zu Kommentar# 17. April 2021
Hier ist eine grundlegende Implementierung davon in Nuxt.js. Das Äquivalent zu Next.js, aber für Vue. Die Verwendung eines Cookies und die Ausführung auf der Serverseite ist tatsächlich viel besser, da sie das Rendern der Seite nicht verzögert, bis das JS geparst und ausgeführt wird.
```
// In `store/index.js`
nuxtServerInit({state}) {
    state.theme = this.$cookie.get('user-theme'); // Cookie-unversal-nuxt parse the Cookie header of the request to retreive the client-side cookie
}

// In `layout/default.vue` or a plugin
head() {
    return {
        htmlAttrs: {
            lang: this.$store.state.theme
        },
    }
}
```

Lenny

# 15. April 2021

Sie könnten ein kleines Skript wie dieses in den Head der Seite einfügen und ich glaube nicht, dass die Verzögerung zu groß ist.

<script>document.documentElement.className=localStorage.getItem("theme")||""</script>

Websites wie https://mxb.dev/ oder meine verwenden diese Technik bereits.

Nathan Brown

# 15. April 2021

Wie wäre es damit, die Seite komplett auszublenden, bevor die Benutzereinstellung für das Theme bekannt ist? Verwenden Sie einen mittleren Grauton als Übergang und blenden Sie dann zum hellen oder dunklen Theme über, wenn möglich...

Chris Coyier

Permalink zu Kommentar# 16. April 2021

Das meine ich mit erzwungener Verzögerung. Fühlt sich wie ein hoher Preis für das an.
Valentin Born

Permalink zu Kommentar# 24. Mai 2021
Außerdem ist 'no-js-no-content' eine der schlimmsten Entwicklungen im Web der letzten Jahre.
Wenn Sie die Seite ausblenden müssen, verwenden Sie etwas wie body.preloader im Markup; und im CSS
```
@keyframes opacity-in {100% {opacity:1}}
.preloader {animation:1.5s forwards opacity-in; opacity:0}
```

Hain Rich

# 16. April 2021

Ja. Ich würde gerne sehen, dass dieses Problem weniger vernachlässigt wird. Ich würde mich sogar mit dem Standardmäßig dunklen Körperhintergrund zufriedengeben, da bei FART die Leute, die helle Farben bevorzugen, nicht so stark beeinträchtigt werden wie umgekehrt.

Chris Coyier

# 16. April 2021

Ein aktuelles Webphänomen

FOLMBDMKI*

Flash Of Light Mode Before Dark Mode Kicks In

* Ich arbeite an einer besseren Abkürzung.

— Stu Robson (@StuRobson) 8. August 2020

Chris Coyier

# 16. April 2021

FOPCS:D

Flash Of Prefers-Color-Scheme: Dark

— Stu Robson (@StuRobson) 23. März 2020

Chris Coyier

# 16. April 2021

https://twitter.com/hotplinth/status/1382844581486682118

Skeukry

# 16. April 2021

Ein kleines Inline-JavaScript im HTML-Header, das die Benutzereinstellung aus einem Cookie oder localStorage lädt, scheint meiner Meinung nach keine allzu große Verzögerung beim Rendern zu verursachen.

Marko

Permalink zu Kommentar# 17. April 2021

Ja, da stimme ich zu. Ich habe auch gesehen, dass ein kleines Skript-Tag als erstes Element innerhalb des Body-Tags platziert wird, wo Theme-Einstellungen überprüft und umgesetzt werden. Ich würde nicht sagen, dass dies das Rendern spürbar beeinträchtigt ... zumindest im Vergleich zu allem anderen, was wir täglich tun.

Taufik Nurrohman

# 19. April 2021

Stellen Sie einfach sicher, dass Sie die Dunkelmodus-CSS-Klasse vor allen <link rel="stylesheet">- und <style>-Tags platzieren.

<html>
  <head>
    <script>
    document.documentElement.classList.add('js');
    </script>
    <script>
    if (localStorage.getItem('is-dark')) {
        document.documentElement.classList.add('is-dark');
    }
    </script>
    <style>
    :root {
      background: #fff;
      color: #000;
    }
    :root.is-dark {
      background: #000;
      color: #fff;
    }
    </style>
    ...

Nathan

# 1. Mai 2021

Ich bin nicht davon überzeugt, dass Blitze von ungenauen Farbthemen das große Problem sind. Soweit ich sehen kann

ein Blitz von Weiß, der vor dem Laden eines dunklen Themas auftritt, ist in einem dunklen Raum bei ausgeschaltetem Licht fantastisch unangenehm.
Ein Blitz von schwarzem Bildschirm, der draußen bei Tageslicht betrachtet wird, sieht lediglich aus, als wäre ein Teil des Bildschirms für den Bruchteil einer Sekunde ausgeschaltet.

In Anbetracht dieser Asymmetrie wäre es nicht besser, dieses Problem als "Blitze von Weiß sind um jeden Preis zu vermeiden; Blitze von Schwarz sind viel, viel weniger schlimm" zu betrachten und mit dem Schreiben von Stylesheets zu beginnen, die primär für den Dunkelmodus sind?

Ich habe noch nicht an Websites gearbeitet, bei denen FOUT etwas ist, das ich beheben musste, aber wie wäre es mit etwas wie diesem

<style>html { color: white; background: black; }</style>
<link rel='stylesheet' href='/all.css'>

Auf diese Weise erhalten Seiten ein Farbschema von Schwarz auf Weiß, bevor der Browser überhaupt anfängt zu rendern, und niemand wird im Bett geblendet.

lyxsus

# 8. Mai 2021

Hallo, ich habe versucht, eine Lösung für dieses Problem zu finden.
https://medium.com/@lyxsus/fixing-fart-flash-of-inaccurate-color-theme-for-static-websites-7935f7f85e20

Jim Nielsen

# 29. Mai 2021

Das habe ich eine Weile so gemacht, indem ich ein Skript-Tag am Anfang des Dokuments platziert habe. Es half, den Flash ohne spürbare Leistungseinbußen zu umgehen. Ich habe darüber geschrieben:

https://blog.jim-nielsen.com/2018/icon-galleries-dark-mode/

Zugegebenermaßen erfordert es JavaScript. Schließlich habe ich diese Funktionalität entfernt, indem ich den UI-Schalter für den dunklen Modus entfernt und mich ausschließlich auf `prefers-color-scheme` verlassen habe, was die Notwendigkeit von serverseitigem Rendering oder JS-Tricks zur Beibehaltung des Zustands eines dunklen oder hellen Modus-Schalters umgeht.

Boghyon Hoffmann

# 5. August 2021

Es gibt jetzt einen neuen Vorschlag, um FART zu verhindern: https://github.com/WICG/user-preference-media-features-headers

Dies würde es ermöglichen, Benutzereinstellungen (wie z. B. das bevorzugte Farbschema) im Header der anfänglichen Anfrage zu hinterlegen.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.