Dies ist *nicht* dieser Blogbeitrag. Ich sage, *nehmen wir an, Sie würden es tun*.
Dies ist keine Abwertung anderer Blogbeiträge über den Dunkelmodus. Es gibt viele gute, und ich bin ein Fan jedes Informationsaustausch-Blogbeitrags. Dies ist eher eine Denksportaufgabe darüber, was meiner Meinung nach erforderlich wäre, um einen *wirklich großartigen* Blogbeitrag zu diesem Thema zu verfassen.
- Sie würden erklären, was der Dunkelmodus ist. Sie würden sich jedoch nicht lange damit aufhalten, da die Leute, die einen Blogbeitrag wie diesen lesen, wahrscheinlich bereits wissen, was er ist.
- Sie hätten auf jeden Fall eine schöne Demo. Wahrscheinlich mehrere Demos. Eine, die sehr einfach ist, damit die wichtigsten Codezeilen leicht zu erkennen sind. Vielleicht etwas, das `background-color` und `color` austauscht. Die andere(n) Demo(s) befassen sich mit komplexeren und realen Szenarien. Was machen Sie mit Bildern und Hintergrundbildern? SVG-Striche und -Füllungen? Schaltflächen? Rahmen? Schatten? Das sind seltene Dinge, die Websites haben, sodass jeder, der ein UI im Dunkelmodus entwirft, darauf stoßen wird.
- Sie würden sich mit der Tatsache befassen, dass der Dunkelmodus eine Wahl ist, die auf Betriebssystemebene selbst erfolgen kann. Glücklicherweise können wir das in CSS erkennen, also müssen Sie abdecken, wie.
- JavaScript muss möglicherweise auch die Betriebssystemwahl kennen. Vielleicht, weil einige Stile auf JavaScript-Ebene stattfinden, aber auch wegen des nächsten Punktes.
- Der Dunkelmodus könnte (sollte?) auch eine Wahl auf der Website selbst sein. Das dient Fällen, in denen ein Benutzer auf dieser speziellen Website eine Wahl bevorzugt, die das Gegenteil ihrer Betriebssystempräferenz ist.
- Der Bau eines Themenwechsels ist keine kleine Aufgabe. Wenn Ihre Website über eine Authentifizierung verfügt, sollte diese Wahl wahrscheinlich auf Kontoebene gespeichert werden. Wenn nicht, sollte die Wahl auf andere Weise gespeichert werden. Eine Möglichkeit ist `localStorage`, aber das kann Probleme haben, wie die Tatsache, dass CSS im Allgemeinen auf eine Seite angewendet wird, bevor JavaScript ausgeführt wird, was bedeutet, dass Sie mit einer "Flash of incorrect theme" (kurzzeitige Anzeige eines falschen Themas) Situation konfrontiert sind. Möglicherweise müssen Sie mit Cookies arbeiten, um bei jedem Seitenaufruf themenspezifisches CSS zu senden.
- Ihr Blogbeitrag würde reale Beispiele von Leuten enthalten, die das bereits tun. Auf diese Weise können Sie untersuchen, wie sie es gemacht haben und wie erfolgreich sie waren. Vielleicht können Sie sie auch um einen Kommentar bitten. Wenn es einige *schlechte* Beispiele gibt, sollten Sie diese auch abdecken, manchmal lernt man am besten, indem man lernt, was man vermeiden muss.
- Sie werden sich anderer Texte zu diesem Thema bewusst sein. Das sollte Sie nicht davon abhalten, selbst über das Thema zu schreiben, aber ein Blogbeitrag, der so klingt, als wären Sie die erste und einzige Person, die über ein Thema schreibt, obwohl Sie es eindeutig nicht sind, hat einen unbeholfenen Ton, der nicht gut ankommt. Sie können nicht nur aus den Texten anderer lernen, sondern auch daraus schöpfen und sie potenziell weiterentwickeln.
- Da Sie Browsertechnologie behandeln, werden Sie die Unterstützung dieser Technologie in der Browserlandschaft behandeln. Gibt es nennenswerte Ausnahmen bei der Unterstützung? Kommt diese Unterstützung? Haben Sie recherchiert, was die Browser selbst über die Technologie sagen?
- Es gibt unzählige Auswirkungen auf die Barrierefreiheit. Der Dunkelmodus selbst kann als Barrierefreiheitsfunktion betrachtet werden, und es gibt auch damit verbundene Barrierefreiheitsprobleme, wie z. B. wie der Schalter funktioniert, wie Modusänderungen angekündigt werden, und eine ganze Reihe neuer Farbkontraste, die berechnet und richtig eingestellt werden müssen. Ein Blogbeitrag ist eine großartige Gelegenheit, all das zu besprechen. Haben Sie es recherchiert? Haben Sie mit Personen gesprochen, die spezielle Bedürfnisse in Bezug auf diese Funktionen haben? Irgendwelche Experten? Haben Sie gelesen, was Accessibility-Experten über den Dunkelmodus sagen?
Das alles bezog sich auf den Dunkelmodus, aber ich wette, Sie können sich vorstellen, wie die Berücksichtigung all dieser Punkte jedem Blogbeitrag zugutekommen könnte, der ein technisches Konzept behandelt.
Ich würde die Überlegungen hinzufügen...
was die Vorteile des Dunkelmodus sind,
wie er mit einem Modus mit hohem Kontrast verbunden ist,
ob es sich nicht nur um einen stilvollen Hype handelt, der von Apple ausgelöst wurde,
was das Betriebssystem automatisch tut, wenn ein Benutzer den Dunkelmodus als Standard gewählt hat,
und wann sich der Aufwand lohnt.
Vielleicht mit einigen Zahlen zur Lesbarkeit von weißem Text auf schwarzem Hintergrund würzen.
Aber ich habe bisher keine ausreichenden Antworten auf diese Fragen gefunden, daher bisher kein Blogbeitrag von mir.
Einen solchen Blogbeitrag würde ich auf jeden Fall lesen ;)
Ich streite nicht ab, dass es sie gibt, aber was wäre der Anwendungsfall für die Ankündigung einer Themenänderung? Ist das nicht rein visuell? Ich verstehe, wie es für die meisten Barrierefreiheitsprobleme gelten könnte, wie z. B. sehende Benutzer, die eine Tastatur oder ein anderes Navigationsgerät verwenden, und daher benötigen, dass der Schalter fokussierbar ist usw.
Aber auditive Rückmeldung? Ich schätze, man könnte sagen: „Nun, manche sehende Benutzer verwenden immer noch gerne Screenreader.“ Und obwohl das definitiv wahr ist, sind Themenänderungen immer noch keine Frage des *Inhalts*, sondern eher der Visuals.
Ich weiß, dies ist kein Blogbeitrag über den Dunkelmodus und daher möglicherweise nicht der richtige Ort für die Diskussion, aber ich fand es trotzdem interessant. Ich bin auf andere Situationen gestoßen, in denen ich mich gefragt habe, ob etwas einfach unzugänglich gemacht werden sollte (zumindest in Bezug auf auditive Rückmeldung), gerade *weil* es rein visuell war, aber es fühlt sich einfach falsch an. Ich bin mir nur nicht sicher warum. Dies ist also vielleicht ein ganz eigenes Thema.
Nur um zu sagen, dass für JAMstack-Sites der beste Weg, einen umschaltbaren Dunkelmodus zu haben, die Vorab-Renderung von HTML in ServiceWorker und die Verwendung von IndexedDB anstelle von LocalStorage zur Speicherung des Benutzerstatus ist.
Ein clientseitiger umschaltbarer Dunkelmodus hat entweder einen Flash of Unstyled Content (FOUC) oder blockiert das Rendern der Seite, bis LocalStorage und JavaScript verfügbar sind – beides ist für die Benutzererfahrung schlecht. Die Verwendung von ServiceWorker und IndexedDB ahmt das Verhalten von serverseitigem Rendering mit Cookies nach.
Es ist sehr knifflig und hacky, da die meiste String-Ersetzung in JavaScript synchron erfolgt und ServiceWorker meist nur asynchrone Funktionen ausführen kann – ein Trick, den ich verwende, ist das Verketten von String-
.replace()innew Response(), wenn eine Antwort für ein fetch-Ereignis im Service Worker zurückgegeben wird (nach Überprüfung desContent-Typeim Header, natürlich).Sie können sehen, wie es auf meiner Website funktioniert, die ich gerade entwickle. Die Option für den Dunkelmodus-Schalter (und das Farbthema) befindet sich in der oberen rechten Ecke.
https://prognovel-staging.netlify.com