Seit macOS 10.14 ist es möglich statt des klassisch hellen ein dunkles Erscheinungsbild zu wählen. Die Auswahl des Erscheinungsbilds hat systemweite Auswirkung, und verwandelt die Benutzeroberfläche des Mac in ein angenehm dunkles Farbspektrum. Nach einer kurzen Testphase gefiel mir die dunkle Ästhetik wesentlich besser und ich wechselte auch im Editor zu einem dunklen Theme.
Während viele Programme die dunkle Ästhetik sehr gut umgesetzt haben, wirkten helle Webseiten, wie diese hier, sehr schnell wie ein Störkörper in der sonst dunkel gehaltenen Ästhetik. Aus diesem Grund nahm ich mir eben einen Moment Zeit um den kommenden Ausdruck für eine Media Query zu testen, um auch eine Webseite auf die Auswahl der Nutzerin reagieren zu lassen. Die Media Query, die dafür verantwortlich ist, liest sich folgendermaßen:
@media (prefers-color-scheme: dark) {
/* dark mode styles */
}Wird diese verwendet, lässt sich eine Webseite so designen, dass sie sowohl das helle wie das dunkle Erscheinungsbild unterstützt.
In diesem Codepen habe die Anwendung des dunklen Erscheinungsbildes auf eine Webseite schnell getestet. Bisher unterstützt nur Safari Technology Preview (ab Version 68) den Ausdruck prefers-color-scheme, der für ein solches Webdesign benötigt wird. Falls Du diesen Browser nicht installiert hast, siehst Du unter obigem Link die helle Version der Webseite, die dunkle sieht folgendermaßen aus:
Zum direkten Vergleich, hier noch ein Bildschirmfoto der hellen Version:
Bis der Ausdruck in allen gängigen Browsern unterstützt wird, kommen nur weniger Nutzerinnen in den Genuss des dunklen Webdesigns. Im Sinne von Progressive Enhancement kann diese Technologie schon jetzt eingesetzt werden, so dass das Erlebnis einiger weniger Nutzerinnen schon jetzt verbessert wird, und andere zu einem späteren Zeitpunkt in den Genuss kommen werden.
Vor einigen Wochen las ich den Artikel Redesigning your product and website for dark mode von Andy Clarke, der noch auf einige weitere wichtige Aspekte eingeht. Die Entwickler-Dokumentation von Apple gibt ebenfalls nützliche Hinweise zum Design für das dunkle Erscheinungsbild.
Mentions