Am 30. März 2020 gaben Stack Overflow-Entwickler Website-Besuchern die Möglichkeit, eine Beta-Version des dunklen Themas zu verwenden. Das Material, dessen Übersetzung wir veröffentlichen, ist der Geschichte gewidmet, wie das dunkle Thema von Stack Overflow erstellt wurde.Banner on Stack Overflow, mit dem Sie ein dunkles Themaeinfügen können. Mein Name ist Aaron Sheki. Ich bin der Designleiter bei Stack Overflow. Ich beteilige mich an der Gestaltung der Schnittstellenkomponenten, die den neuen Funktionen des Projekts zugrunde liegen.Zunächst ein wenig Ironie. Persönlich bin ich kein Fan von dunklen Interface-Themen.Ich sehe oft, dass der Kontrast von dunklen Schnittstellen zu niedrig ist. Bei der Gestaltung solcher Schnittstellen ist es schwierig, eine vollständige Farbpalette zu verwenden. Gleiches gilt für die Simulation der Lautstärke mithilfe von Schatten und für die Anwendung anderer visueller Effekte. Wenn ich einen hellen Text auf einem dunklen Hintergrund lese, werden meine Augen müde. Es ist schwierig, mit Phänomenen wie dem gleichzeitigen Kontrast umzugehen, wenn helle Themen verwendet werden. Wenn ein dunkles Thema verwendet wird, wird alles komplizierter.Aber ich bin die Person, deren Bemühungen ein dunkles Thema auf Stack Overflow angesprochen haben.Die Arbeit, über die ich sprechen möchte, war nie speziell auf die Entwicklung eines dunklen Themas ausgerichtet, obwohl viele Benutzer lange darum gebeten haben, die Ressource mit einem solchen Thema auszustatten. Aber im Zuge eines dunklen Themas mussten wir viele Probleme lösen. Insbesondere wurde der Front-End-Code für den Stapelüberlauf aktualisiert und die Zugänglichkeit von Inhalten verbessert. Die Arbeit an einem dunklen Thema haben wir einen Anreiz , unsere nutzen Designsystem mehr weit in das Projekt .Können wir den Benutzern ein dunkles Thema geben und gleichzeitig den Weg zur Verbesserung der Zugänglichkeit des Projekts ebnen? Wir haben diese Frage bejaht, nachdem wir alles getan haben, worüber ich jetzt erzählen werde.Farbforschung
Bei der Erstellung der ursprünglichen Farbskalen für das Projekt haben wir, wahrscheinlich ein wenig naiv, einen bestimmten Farbwert verwendet und ihn mithilfe von Transformationen geändert, die mit Less implementiert wurden . So könnten wir beispielsweise eine Less-Variable deklarieren @redund die Farbe mithilfe des Designs mehrmals dunkler machen darken(@red, 10%). Gleiches gilt für die Mehrfachfarbenklärung mit tint(@red, 10%). Dies kann eine Farbskala ergeben, in der die Farben im Bereich von @red-050bis @red-900in Schritten von 10% liegen.Als ich zum ersten Mal versuchte zu verstehen, wie die Stapelüberlaufressource im Dunkelmodus aussehen könnte, entschied ich mich, einfach den weißen Hintergrund in Schwarz zu ändern und die Farbskalen umzudrehen. Bei diesem Ansatz wird Farbe @red-050zu Farbe@red-900Die Farben ändern sich entsprechend zwischen der Anfangs- und der Endfarbe der Skala. Diese Farben selbst bleiben jedoch die gleichen wie zuvor.Helle und dunkle Farbskalen für Rot.Bei diesem Ansatz hat der Kontrast der Elemente gelitten. Es stellte sich heraus, dass das, was passierte, etwas enthielt, das mir an dunklen Themen im Allgemeinen nicht gefiel. Wenn Sie sich beispielsweise die dunkelste Version von Rot auf dunklem Hintergrund genau ansehen, werden Sie feststellen, dass die Farbe kaum zu unterscheiden ist. Wir werden weiter unten mehr darüber sprechen.Wir müssen uns definitiv etwas Besseres einfallen lassen.▍Erste Schritte: Layout-Design
Nur beim Versuch, die Farbskalen zu zeichnen, habe ich eigentlich nichts erreicht. Dieser Schritt kann nicht als der eigentliche Beginn der Arbeit an einem dunklen Thema bezeichnet werden. Aus diesem Grund habe ich beschlossen, ein Layout zu entwickeln und Farben in Figma manuell auszuwählen . Ich habe die Farben ausgewählt, wobei ich mich darauf konzentrierte, wie Stack Overflow meiner Meinung nach aussehen sollte, und nicht darüber nachdachte, wie sich die neuen Farben auf vorhandene beziehen. Die Reduzierung des Gesamtkontrasts war der Schlüssel zum Erhalt des Tiefeneffekts in der Benutzeroberfläche, zur Unterstützung der Schatten von Elementen und zur Anwendung des gesamten Farbspektrums.Die ersten Schritte mit der Gestaltung des Layouts ermöglichten es uns zunächst zu verstehen, welchen ästhetischen Effekt wir anstreben, ohne die technischen Anforderungen für das Projekt zu berücksichtigen▍Auswahl eines verbesserten Algorithmus für die Arbeit mit Farben
Nachdem ich einen helleren Hintergrund für das dunkle Thema aufgenommen hatte, hatte ich die Gelegenheit, die Farbskalen genauer zu untersuchen. Zuerst musste ich mich mit einigen Farbproblemen des vorhandenen Designsystems befassen, die bei der Anwendung des Lichtthemas auftraten. Am hellen Ende des Spektrums sahen die roten und gelben Farben nicht so aus, wie ich es gerne hätte. Einige Farben hatten die hellsten Werte, zu nahe an Weiß. Es gab Farben, deren hellste Werte zu dunkel waren.Die hellste Version von Gelb war nicht von Weiß zu unterscheiden, und die dunkelste Version war nicht von Schwarz zu unterscheiden. Wir hatten Probleme am dunklen Ende des Spektrums. Verwendung als Hintergrund, Farben@red-900und@blue-900bemerkten wirdass diese Farben von Schwarz nichtunterscheiden sind und voneinander. Wir brauchten einen Algorithmus, der uns Farben liefert, deren Hauptton sowohl für die hellste als auch für die dunkelste Version unterscheidbar ist. Dies würde die Erstellung von Komponenten unter Verwendung dieser Farbwerte ermöglichen.Die dunkelsten Variationen unserer Farben waren nicht von Schwarz und voneinander zu unterscheiden. Bei derErstellung von Komponenten, die Benachrichtigungen implementieren, konnten wir die Farben aus unserem Designsystem nicht verwenden. Stattdessen mussten wir unsere eigenen Farben für das Auge auswählen.Diese Farben sind wunderschön, basieren jedoch nicht auf den Farbwerten unserer Farbskalen.Ich habe das wunderbare ColorBox- Toolvon Lyft Design verwendet, um die Farben zu normalisieren. Anstatt die Farben auf einfachste Weise linear in Schritten von 10% zu ändern, habe ich Bezier-Kurven angewendet. Dadurch konnten wir die extremen Positionen der Farbskalen deutlich verbessern.Nachdem ich die Farben im hellen Teil des Spektrums normalisiert hatte, konnte ich Benachrichtigungen erstellen, deren Farben den Farben unseres Designsystems entnommen sind▍ Dunkle Farben
Nachdem wir die helle Version der Website bestellt haben, ist es Zeit, neue Farben vor einem dunklen Hintergrund auszuprobieren. Infolgedessen habe ich auf manuelle Einstellungen des Farbanpassungsalgorithmus zurückgegriffen, um die Unternehmensfarben zu erhalten, die seit sehr langer Zeit verwendet werden. Dadurch konnte ich neue Farben in der Produktion verwenden und gleichzeitig auf zu drastische Änderungen im Erscheinungsbild des Projekts verzichten.Voll normalisierter FarbumfangImplementieren eines dunklen Themas in der Stacks-Oberfläche
Wenn ich irgendwie hoffen würde, Stack Overflow mit einem dunklen Thema auszustatten, müsste ich zuerst ein dunkles Thema in unser Stacks- Design-System implementieren und es als Testgelände zum Testen neuer Technologien verwenden.▍Variablen
Ich musste statische, weniger kompilierte hexadezimale Farbwerte in benutzerdefinierte CSS-Eigenschaften konvertieren, die für die Verwendung während der Ausführung des Programms entwickelt wurden. Der Punkt ist, dass Farbwerte mithilfe von Ansichtsstrukturen var(--red-500)und nicht mithilfe statischer Ansichtsstrukturen gespeichert werden sollten @red-500. Es war eine interessante Aufgabe - sowohl innerhalb unseres Systemdesigns als auch innerhalb des gesamten Standorts. Normalerweise haben wir einen einzelnen Farbwert verwendet @red-500und ihn heller oder dunkler gemacht, um verschiedene Zustände der Elemente hervorzuheben (wie die Zustände, die die Elemente annehmen, wenn sie über ihnen schweben oder wenn sie fokussiert werden), um sie als Hintergrundfarbe oder Farbe der Ränder der Elemente zu verwenden.Wenn wir über die Farben jeder der Schaltflächen sprechen, die wir viel haben, über die Farben jedes Zustands jeder Schaltfläche, dann können wir sagen, dass diese Farben im Verlauf einer Reihe von Transformationen eines einzelnen kompilierten Farbwerts erhalten wurden. Es erinnerte mich an eine Szene aus dem Film "Das Spiel für einen Sturz". Dort sprachen sie über die Möglichkeit, eine zehnmillionste Investition in Milliarden Dollar umzuwandeln. Es ist nicht verwunderlich, dass solche „Transformationen“ zur Finanzkrise geführt haben.Das Problem mit regulären CSS-Variablen besteht darin, dass Sie keine Less-Transformationen auf sie anwenden können. CSS-Variablenwerte werden zur Laufzeit berechnet, sodass ein solches Konstrukt darken(var(--red-500), 5%)zu einem Kompilierungsfehler führt.All dies bedeutete, dass ich den Code überarbeiten musste, der zum Beispiel für das Stylen von Schaltflächen verantwortlich war. Zuerst sah er so aus:.s-btn {
color: @white;
background-color: @blue-600;
border: 1px solid darken(@blue-600, 5%);
&:hover {
background-color: darken(@blue-600, 5%);
border-color: darken(@blue-600, 10%);
}
}
Ich musste fortfahren, um die genauen Farbwerte anzugeben, die in unserem Farbsystem beschrieben sind. Infolgedessen musste ich zu dieser Version des Codes kommen:.s-btn {
color: var(--white);
background-color: var(--blue-600);
border: 1px solid var(--blue-700);
&:hover {
background-color: var(--blue-700);
border-color: var(--blue-800);
}
}
Gleichzeitig war klar, dass nicht alles auf Knöpfe beschränkt war. Daher musste ich die Stile aller in Stacks verfügbaren Komponenten überarbeiten. Gleiches gilt für Benachrichtigungen, Popup-Menüs, modale Fenster, Links und viele andere Komponenten.▍ Browserkompatibilität
Wenn wir über CSS-Variablen sprechen, bedeutete ihre Anwendung, dass ihre Unterstützung durch Browser in Betracht gezogen werden musste. Insbesondere werden sie von Internet Explorer 11 nicht unterstützt - einem Browser, den wir nie vergessen haben. Aus diesem Grund haben wir beschlossen, die IE11-Unterstützung aufzugeben und all die CSS-Hacks zu entfernen, die wir im Laufe der Jahre des Systems unter Berücksichtigung der Funktionen dieses Browsers zum System hinzugefügt haben. Darüber hinaus haben wir beschlossen, Benachrichtigungen an IE11-Benutzer mit dem Vorschlag zur Installation eines neuen Browsers zu senden. Diese Entscheidung war für uns nicht einfach. Die Implementierung erforderte wochenlanges Refactoring.▍Bedingte Klassen
IE11 hat mich nicht mehr eingeschränkt und ich konnte mit Farben in Stacks arbeiten. Ich habe beschlossen, dem Element eine bodyKlasse hinzuzufügen .theme-system. Nachdem dies geschehen war, konnte ich helle Farben durch ihre dunklen Entsprechungen durch die entsprechende Medienabfrage ersetzen. Darüber hinaus könnten wir die Medienanfrage vollständig ablehnen, indem wir sie einfach zur bodyKlasse hinzufügen .theme-dark. Auf diese Weise können Benutzer das dunkle Thema der Site unabhängig von ihren Systemeinstellungen verwenden. Folgendes habe ich als Ergebnis erhalten:body {
--red-600: #c02d2e;
}
body.theme-system {
@media (prefers-color-scheme: dark) {
--red-600: #d25d5d;
}
}
body.theme-dark {
--red-600: #d25d5d;
}
Um volle Flexibilität zu erreichen, ermöglicht Stacks die Arbeit mit atomaren Farbklassen, die nur gelten, wenn ein dunkles Thema aktiviert ist. Details zur CSS-Unterstützung in Stacks finden Sie hier . Beispiel: Hinzufügen einer Klasse zu einem Element. d:bg-green-100Der Designer drückt den folgenden Gedanken aus: "Im dunklen Modus müssen Sie Grün als Hintergrund verwenden bg-green-100." Zusätzliche bedingte Klassen für den Dunkelmodus ermöglichen es uns, die Ränder von Elementen zu entfernen, Hintergründe zu ändern und die Farbe des Texts anzupassen. In diesem Tweet sehen Sie ein interessantes Beispiel für die Farbanpassung. Eine solche Einstellung ist im Dunkelmodus manchmal erforderlich. Ich möchte darauf hinweisen, dass eine der Inspirationsquellen bei der Arbeit am dunklen Modus der Website für mich das Tailwind CSS-Framework war .▍Verwenden Sie ein dunkles Thema in Stacks
Nachdem das dunkle Thema in Stacks implementiert wurde, haben wir beschlossen, oben auf der Systemoberfläche eine Schaltfläche hinzuzufügen, mit der Sie zwischen Themen wechseln können. Die Mitarbeiter des Unternehmens sollten schnell und bequem zwischen verschiedenen Farbthemen der Website wechseln können.Wechseln Sie in Stapeln zwischen hellen und dunklen ThemenImplementieren eines dunklen Themas auf der Stack Overflow-Hauptseite
Ich habe die Aufgaben im Zusammenhang mit der Implementierung des dunklen Themas in der Oberfläche des Stacks-Design-Systems relativ einfach gelöst. Das Refactoring, das Überlegungen zur zukünftigen Entwicklung des Systems berücksichtigt, erleichtert es Stacks, aufgrund der Folgen fehlerhafter Entscheidungen in der Vergangenheit kleiner als der Hauptstandort zu sein. Um den Stapelüberlauf mit einem dunklen Thema auszustatten, musste ich weniger Variablen unterstützen, um die Abwärtskompatibilität der Lösung zu gewährleisten. Dies ermöglichte es uns, die Anwendung des dunklen Themas schrittweise in separaten Teilen der Benutzeroberfläche zu organisieren.Da der größte Teil unserer nach 2018 erstellten Benutzeroberfläche auf Stacks basiert, erhält dieser Teil der Benutzeroberfläche ohne unser Zutun ein dunkles Thema und ansprechende Layouts. Was ist mit dem Hauptteil der Benutzeroberfläche? Alles hier ist alles andere als einfach.▍Hauptfarben der Site
Zunächst musste ich die größten Änderungen an der Site vornehmen, die vorgenommen werden konnten, ohne das Standard-Lichtthema Stapelüberlauf zu verletzen. Die Aufgaben, die ich lösen musste, bestanden hauptsächlich darin, statische Less-Variablen durch entsprechende CSS-Variablen zu ersetzen. Zuerst habe ich den Stil background-color: var(--white)auf den Hintergrund der Site angewendet und ihn durch den Stil ersetzt background-color: @white. Dank dessen konnte der Hauptbereich der Dörfer nun leicht in der dunklen Hintergrundfarbe neu gestrichen werden. Dann habe ich den gleichen Vorgang mit den Farben der Schriftarten und einigen anderen Elementen durchgeführt. Diese Arbeit bestand hauptsächlich darin, eine große Menge an CSS-Code zu entfernen, da wir zum Beispiel häufig übermäßig detaillierte Stile mochten und die Schriftfarben untergeordneter Elemente festlegten, obwohl wir mit Farbwerten auskommen konnten, die von übergeordneten Elementen geerbt wurden.▍ Demonstration eines neuen Designs für die Mitarbeiter des Unternehmens
Nachdem ich an großen Blöcken der Site gearbeitet hatte, bat ich unsere Programmierer Adam Lear und Nick Craver, mir zu helfen, den Mitarbeitern von Stack Overflow eine vorläufige Version des dunklen Themas zu zeigen. Dies würde es den Mitarbeitern ermöglichen, ein dunkles Thema aufzunehmen, das noch weit davon entfernt ist, zu erkennen, welche Bereiche der Website noch verbessert werden müssen. Dies, dachte ich, würde sie ermutigen, Teile der Website mit dem meisten Verkehr zu verfeinern. Dies würde es mir ermöglichen, die Haupthindernis für ein neues Design zu überwinden. Dies würde nämlich dazu beitragen, das neue Design in die vorhandene Codebasis zu integrieren.UttTasten
Wenn der Bereich der Site, an dem ich gearbeitet habe, mit Stacks erstellt wurde, mussten nicht sehr viele Probleme gelöst werden, um ihn für die Verwendung des Dunkelmodus vorzubereiten. Nehmen wir an, im Verlauf der Arbeit konnte entschieden werden, dass irgendwo der Rand nicht benötigt wurde oder dass irgendwo ein spezieller Grauton als Hintergrundfarbe benötigt wurde. Diese Vorbereitung für die Verwendung des Dunkelregimes könnte begrenzt sein. Leider wurde der größte Teil der Website ohne Verwendung von Stacks erstellt.Dies zeigte sich am deutlichsten bei den Knöpfen. Im Laufe der Jahre der Arbeit an der Site wurden viele Button-Implementierungen verwendet. Dies war besonders frustrierend, da wir die Elemente selbst stilisiert haben button. Dies bedeutet, dass jedes Element buttonoder Element, das als dekoriert istinput type=«button»wurde der Standardstil zugewiesen. Dieser Stil weist ein sehr hohes Maß an Spezifität auf und basiert auf einem veralteten Regelwerk.Die oben genannte Tatsache hat dazu geführt, dass viele Umgestaltungen erforderlich sind, die noch andauern. Ziel ist es, CSS-Stile auf Elementebene zu entfernen buttonund durch Entsprechungen aus Stacks zu ersetzen. Insbesondere sprechen wir über die Tatsache, dass Hunderte von Elementen input type=«submit»durch ersetzt werden müssen <button type="submit" class="s-btn s-btn__primary">. Neben dem Hinzufügen von Arbeit stelle ich fest, dass wir häufig JavaScript-Funktionen mit visuellen Selektoren verknüpft haben. Wenn Sie die Klassen ändern, die sich auf das Erscheinungsbild des Elements auswirken, kann dies die Funktionalität der Schaltfläche beeinträchtigen. Daher musste ich während der Verarbeitung von Tausenden von Schaltflächen zuerst Klassen hinzufügenjs-Verbinden Sie Handler mit ihnen, und entfernen Sie dann alte Stile, die das Erscheinungsbild von Schaltflächen definieren.Dies führte letztendlich dazu, dass ich die meisten alten Schaltflächenklassen entfernte, wodurch die Schaltflächen beim Einschalten eines dunklen Themas die Farben korrekt ändern konnten.▍ Website-Titel
Um die Aufgabe zu verkomplizieren, kann der auf der gesamten Site verwendete Header in verschiedenen Modi arbeiten. Wir sprechen über Hell- und Dunkelmodi und über den Unterstützungsmodus für ein spezielles Thema. Die Site-Option für Teams (Stapelüberlauf für Teams) und für Unternehmenssysteme verwendet zwangsweise ein dunkles Header-Thema. Darüber hinaus verwendet die Befehlsversion die Farbe, die durch die Farbe des Team-Avatars angegeben wird. Wie viele unserer anderen Komponenten bietet CSS für den Site-Titel eine einzige Farbe, die bestimmt, ob der Titel hell oder dunkel ist. Diese Farbe wird dann mithilfe komplexer Less-Anweisungen transformiert, sodass Sie die verschiedenen Optionen erhalten. Wir konnten jedoch nicht das tun, was wir getan haben, als wir den Code des Entwurfssystems verarbeitet haben. Das heißt, sie konnten nicht einfach das gesamte alte CSS wegwerfen und durch Code ersetzen.welches CSS-Variablen verwendet. Tatsache ist, dass unsere Firmenkunden das Erscheinungsbild des Headers mithilfe von Themen vollständig anpassen. In diesem Fall werden Farboptionen basierend auf einer einzelnen Farbe generiert.
& when ( iscolor(@theme-topbar-background-color) ) {
@theme-topbar-style: if(luma(@theme-topbar-background-color) >= 50%, light, dark);
}
& when not ( iscolor(@theme-topbar-background-color) ) {
@theme-topbar-style: automatic;
}
Dann wird basierend auf dem empfangenen Wert ( automatic, lightoder dark), wird die richtigen Header erstellt.▍Tags
Wenn ich denjenigen, die am Entwurf von Komponenten beteiligt sind, nur einen Rat geben könnte, würde dieser lauten: "Beschreiben Sie in Komponenten nicht, was sich auf ihre Position auf der Seite auswirkt." Mit anderen Worten, welche Art von Raum die Komponenten trennt, sollte den Kontext bestimmen, in dem sie angewendet werden. Es ist nicht erforderlich, solche Dinge in der Komponente selbst festzulegen. In früheren Versionen von Stack Overflow wurde entschieden, dass post-tagexterne Polster auf Komponenten angewendet werden sollten . Gleichzeitig stellte sich heraus, dass Tags wie Schaltflächen einem JavaScript-Problem unterliegen. Um die Sache noch schwieriger zu machen, wurden die meisten Tags mit einer einzigen Hilfsmethode generiert.Beim Tag-Refactoring wurden post-tagKomponenten durch ersetzts-tag-Komponenten für verschiedene Themen. Diese Arbeit beinhaltete auch Änderungen an JavaScript unter Berücksichtigung der Verwendung js-tag. Darüber hinaus musste die für die Generierung von Tags verantwortliche Methode so geändert werden, dass beliebige Klassen akzeptiert werden, die sich auf die Platzierung von Elementen auswirken. Tatsache ist, dass in bestimmten Kontexten möglicherweise Tags im Flex-Layout platziert werden müssen, anstatt sich auf vordefinierte externe Einrückungen zu verlassen (oder sich mit solchen Einrückungen zu befassen).▍ Styling-Veröffentlichungen
Der Großteil des Stapelüberlaufs besteht aus Benutzerpublikationen. Diese Veröffentlichungen, nämlich Fragen, Antworten, Kommentare, werden mit Hilfe des Markdown-Markups erstellt. Während des Starts von Stack Overflow war Markdown Markup eine relativ neue Technologie.Im Laufe der Jahre hat das Web einige Standardmethoden entwickelt, um Überschriften und Zitate anzuzeigen. Die Einführung des dunklen Themas war ein ausgezeichneter Moment, um unseren Ansatz zur Formatierung von Veröffentlichungen zu überprüfen. Das umstrittenste Thema in dieser Angelegenheit war die Formatierung von Anführungszeichen.Anfänglich wurden Zitate mit einer kräftigen gelben Hintergrundfarbe gerahmt, wodurch der Kontrast des Zitats selbst verringert wurde. Die gelbe Farbe verursacht außerdem bestimmte Probleme, wenn sie auf einem dunklen Hintergrund angezeigt wird. Infolgedessen gingen wir zu der allgemein akzeptierten Methode zur Anzeige von Anführungszeichen über und verwendeten einen schmalen grauen vertikalen Balken, um sie hervorzuheben.▍ Code-Styling
Auf den Seiten von Stack Overflow, die durchaus verständlich sind, werden viele Codeteile angezeigt. Die Farben, mit denen wir die Syntax hervorhoben, hatten nichts mit unseren Signaturfarben zu tun. Ich habe den starken Verdacht, dass diese Farben das Erbe der ersten Bibliothek sind, die im Projekt zur Hervorhebung der Syntax verwendet wird. Nachdem ich diese Farben analysiert hatte, beschloss ich, das Syntax-Highlight einer tiefgreifenden Neugestaltung zu unterziehen. Infolgedessen wurden die Farben der Hintergrundbeleuchtung durch Farben aus unserem Designsystem ersetzt. Dies gilt sowohl für helle als auch für dunkle Themen. Und dies geschieht, damit sich das, was passiert ist, nicht radikal von dem unterscheidet, was es vorher war.Ergebnisse
Das helle Thema und die Beta-Version des dunklen Themas, die am 30. März veröffentlicht wurden.Aufgrund des Umfangs der Refactoring-Arbeiten, die wir beim Übergang zum dunklen Thema durchgeführt haben, konnten wir das Aussehen des Projekts ohne Schwierigkeiten ziemlich stark ändern. Basierend auf dem, was wir jetzt haben, können wir beispielsweise ein kontrastreiches Website-Thema entwickeln, das die Zugänglichkeit erhöht.Die Erstellung des dunklen Themas war das Ergebnis einer grundlegenden Änderung des Ansatzes für das Stack Overflow-Design. Insbesondere sprechen wir über die Verwendung eines Designsystems , das ich seit einem Jahr bewerbe. Das Erstellen eines dunklen Themas war für mich eine hervorragende Gelegenheit, viele Teile der Website neu zu erstellen. Dies ist das erste von vielen Projekten, die die Verfügbarkeit von Stack Overflow erhöhen.Wenn Sie die Ablehnung der Unterstützung für IE11 nicht berücksichtigen, begannen die Arbeiten zum dunklen Thema im Juli 2019 mit dieser PR, um die Situation zu untersuchen. Zuvor gab es im April 2019 Diskussionen zu einem dunklen Thema. Im Oktober 2019 ging eine experimentelle Version eines dunklen Themas in Produktion. Nachdem mindestens 60 PRs erstellt worden waren, wurde den Benutzern eine Beta-Version des dunklen Themas präsentiert. Es geschah am 30. März 2020.Liebe Leser! Verwenden Sie Stack Overflow? Magst du ihr neues dunkles Thema?