Warum ein Dark Theme mehr ist als nur ein Trend
Dark Themes sind längst mehr als nur eine optische Spielerei. Sie stehen für modernes Design, das die Augen schont und ein hochwertiges Nutzererlebnis bietet. Außerdem sind sie spätestens mit der Diskussion um die Barrierefreiheit in den Fokus gerückt. Ich wollte daher zunächst einmal ausprobieren, wie genau ein Dark Theme auf einer Website implementiert wird (bevor ich wahllos irgendein Plugin installiere und gar nicht weiß, was im Hintergrund eigentlich passiert). Da kam ein neues Projekt von SheCodes wie gerufen und ich konnte mich an dieser Testseite ausprobieren. Hinweis: Dies ist eine Testseite. Die Testseite beinhaltet Texte und Bilder von anderen Websites sowie externe Links. Außerdem ist sie nicht mobil optimiert.
Die Testseite findest du hier: https://basicaddonproject.netlify.app/
Fokus war eigentlich nur die Funktion des Buttons. Zudem fand ich es aber spannend ein paar andere Farben auszuprobieren, background-gradients, css-grid usw.
Und da ich so spontan nach einem Thema für eine kleine Seite suchte, kam ich schnell auf die Idee einfach kurz ein Hobby vorzustellen: bouldern. Also nicht wundern, der Inhalt ist nicht sonderlich originell.
Der Start des Projekts: Von der Vision zur Planung
SheCodes gab verschiedene Aspekte des Projektes bereits vor. So sollte ein CSS-grid eingefügt werden und background-gradients sowie das Fokusbild beim hovern animiert werden. Die restliche Planung umfasste dann die anderen Aspekte, wie Farben, Schriften, Thema usw.
Interessant war die Überlegung, wie die Farben im Dark Theme aussehen sollen, denn ein zu starker Kontrast wirkt ebenfalls nicht gut auf die Augen.
Die technische Umsetzung: HTML, CSS und JavaScript
Ich entschied mich bewusst dafür, das Projekt einfach zu halten. Fokus sollte der Button sein für das Dark Theme und das es halbwegs ansprechend aussieht. Grundsätzlich habe ich natürlich mit der semantischen Struktur in HTML angefangen. Ich kann allerdings nicht ganz ohne grundlegendes Design arbeiten und brauche immer eine kleine visuelle Unterstützung. Also habe ich parallel immer etwas CSS hinzugefügt, z. B. für margins oder die Texte. Das machte es mir dann leichter das Gesamtprojekt zu visualisieren.
Als nächstes erstellte ich die CSS Klasse für das Dark Theme und das Styling dafür.
Erst ganz zum Schluss implementierte ich die Javascript-Funktion. Diese fügt einfach eine Klasse hinzu, sodass dann die entsprechenden CSS-Eigenschaften dementsprechend ausgespielt werden.
Design-Highlights: Was das Dark Theme besonders macht
Ein gelungenes Dark Theme lebt von Kontrasten. Durch gezielte helle Akzente hebe ich wichtige Inhalte hervor und setze auf klare Linien und moderne Typografie. Das Ergebnis ist ein Design, das minimalistisch, modern und dennoch farbenfroh wirkt. Gleichzeitig war es mir wichtig, nicht zu starke Kontraste zu verwenden. Demnach wählte ich einen dunklen Hintergrund und helle Schriften.
Sicherlich kann hier noch einiges optimiert werden. Auch die mobile Optimierung habe ich in diesem Projekt nicht betrachtet. Fakt ist aber, dass hier kein unnötiger Code existiert, wie ich es sonst aus meiner Arbeit mit Pagebuildern gewohnt bin.
Mein Fazit: Was dieses Projekt für mich besonders macht
Ich bin stolz darauf, wieder eine Website selbst geschaffen zu haben, die sowohl optisch ansprechend ist, als auch moderne Entwicklungen, wie die Implementierung des Dark Themes aufgreift. Das Coding macht mir immer wieder Spaß und ich könnte noch viel mehr Zeit in die Überlegung eines richtigen Designs stecken. Aber nun ist der Wichtigste Part erstmal geschafft und ich konnte wieder konkret schauen, wie so eine Funktion ohne Plugins oder Pagebuilder implementiert wird. Im nächsten Schritt werde ich dann schauen, wie ein Dark Mode mit WordPress und Divi oder WordPress und Elementor oder anderen Themes angezeigt werden kann.
0 Kommentare