Entwickler lieben sie schon seit Ewigkeiten, nun werden sie immer salonfähiger: dunkle UI Themes. Viele empfinden sie als augenfreundlicher. Ob das wirklich stimmt, kann ich nicht beurteilen. Zu mindest kann dunkles UI-Design aber zu einer besseren Energieeffizienz bei Geräten mit OLED-Displays beitragen, da hierfür schwarze Pixel nicht mit Strom versorgt werden müssen.
Abgesehen davon kann dunkles Design auch einfach ästhetisch besser aussehen.
Die Höhen und Tiefen
Als ich anfing, ein dunkles Bootstrap-Theme zu erstellen, habe ich zuerst einfach alle Weiß-Werte in Schwarz-Werte umgewandelt:
Wie ihr vielleicht seht, ist dies nicht unbedingt der beste Weg. Während im originalem hellen Theme das Karten-Element über dem Hintergrund schwebt, wirkt es im dunklen Theme eher, als wäre das Element in den Hintergrund eingelassen. Statt Höhe zu erzeugen, haben wir also eher Tiefe erzeugt.
Um das Problem zu lösen, müssen wir dafür sorgen, dass das vordere Element immer heller ist als der Hintergrund:
Um die Dimensionen noch weiter zu verdeutlichen, kann man natürlich noch einen Schatten hinzufügen:
Hierbei ist wichtig, dass der Schatten dunkel ist, da sonst ein Leucht-Effekt erzeugt werden würde.
Farben
Wenn ihr ein User Interface von einem hellen auf ein dunkles Theme umstellt, ändert ihr nicht einfach nur die Hintergrundfarbe. Vorher wurde schließlich alles darauf angepassten, in einer hellen Umgebung gut auszusehen. Hier mal ein Beispiel:
Während der Link im hellen Theme sehr gut lesbar ist, ist er das bei einem dunklen Hintergrund gar nicht mehr.
Eine hellere Link-Farbe muss also her:
Mit der lighten()-Funktion von Sass habe ich die gleiche Farbe einfach um 20% aufgehellt (lighten(#0033FF, 20%)).
Der Bootstrap Dark Theme
Mein Bootstrap Theme findet ihr übrigens Colorganize als Web Theme: https://colorganize.com/webTheme/2
Mit dem den neuen Web Theme-Feature auf Colorganize könnt ihr ganz einfach mit einem Designer-Tool das Aussehen von Bootstrap für euch so anpassen, wie ihr es für euer Projekt braucht. Anschließend könnt ihr das Theme auch mit anderen Leuten teilen.
Das Feature ist noch relativ experimentell, aber probiert es gerne mal aus. 😉