Dark Mode in Velog einführen

Ich habe aufgeschrieben, wie wir in einen Service, bei dem Dark Mode ursprünglich nicht berücksichtigt wurde, Dark Mode eingeführt haben.

Der Text wurde sowohl aus der Perspektive eines UX-Designers als auch aus der eines Entwicklers verfasst.

• Auswahl der Technologie

  • Velog verwendet React und Styled Components

  • Der ThemeProvider von Styled Components setzt Themes per JS, daher ist es nur eingeschränkt möglich, das System-Theme als Standard anzuzeigen. Um dem System-Theme zu folgen, muss im Browser einmal JS ausgeführt werden. Wenn das Standard-Theme also nicht fest vorgegeben werden soll, ist das für Velog mit SSR nicht gut geeignet.

  • Mit CSS Variables kann das System-Theme als Standardwert verwendet werden

  • Um in einer CSS-in-JS-Umgebung CSS Variables zu nutzen, verwalten wir Farben als JS-Objekte und verwenden selbst geschriebene Utility-Funktionen, um Fehler zu vermeiden und von der TypeScript-Autovervollständigung zu profitieren

• Überlegungen zur Dark-Mode-Palette

  • Die Farben wurden anhand von Hintergrundfarbe, Textfarbe, Rahmenfarbe sowie Primary- und Destructive-Farben festgelegt

  • Bei den Hintergrundfarben hatten wir sie anfangs nach Helligkeitsstufen 1, 2, 3, 4 geordnet. In der tatsächlichen UI ließ sich das jedoch nicht immer 1:1 zuordnen, daher haben wir die Verwaltung etwas angepasst, um Ausnahmen besser behandeln zu können.

  • Bei der Festlegung von Textfarben ist es wichtig zu prüfen, ob das Kontrastverhältnis angemessen ist. Mit WebAIM kann man prüfen, ob die Farben WCAG-konform sind.

  • Primary- und Destructive-Farben heben sich auch auf dunklem Hintergrund mit den bestehenden Farben gut ab, aber mit entsättigten Farben wirkt es etwas passender für ein Dark Theme

• Austausch der Farben

  • Alles, was sich mithilfe der IDE automatisch ersetzen ließ, wurde entsprechend verarbeitet

  • Die übrigen Ausnahmefarben wurden manuell geprüft und passend festgelegt

  • Wenn sich eine Umsetzung mit bereits vorhandenen Farben unnatürlich anfühlte, wurden bei Bedarf neue Farben zur Palette hinzugefügt und so verwaltet

  • Tatsächlich floss in diesen Arbeitsschritt mit Abstand der meiste Aufwand

• Toggle-Funktion für das Dark Theme

  • Mit zwei SVGs und CSS-Transitions für rotate und scale wurde ein Transition-Effekt umgesetzt

  • Wenn der Nutzer das Dark Theme umschaltet, werden die Benutzereinstellungen in localStorage und Cookies gespeichert

  • localStorage wird im CSR verwendet, Cookies im SSR

Nachdem ich Dark Theme einmal umgesetzt hatte, wurde mir klar, wie unglaublich schwierig es ist, Dark Theme auf eine UI anzuwenden, die nie dafür konzipiert wurde. Künftig werde ich beim Planen und Designen immer Dark Theme mit berücksichtigen. Außerdem scheint es sinnvoller, Farben nicht mit Namen wie gray1, gray2 zu benennen, sondern nach ihrem Verwendungszweck wie text1, text2, damit spätere Anpassungen leichter fallen.