Wenn du daran interessiert bist, einen Dark Mode in deine WordPress-Website einzubauen, erfährst du in diesem Beitrag alles, was du wissen musst.
Zunächst erfährst du einige der Vorteile, die der Dark Mode für deine Website haben kann, z. B. die Verbesserung der Barrierefreiheit, ein gesünderes Erlebnis für die Besucher, die Senkung des Energieverbrauchs und ganz allgemein die Erfüllung der Nutzerwünsche.
Dann zeigen wir dir genau, wie du den Dark Mode in WordPress mithilfe von codefreien Plugins oder benutzerdefinierten Code-Lösungen einrichten kannst.
Am Ende dieses Beitrags wirst du wissen, warum und wie du den WordPress-Dark Mode einrichten kannst. Los geht’s..
Was ist der WordPress-Dark-Mode?
Der WordPress-Dark Mode bedeutet, dass du den Besuchern deiner Website die Möglichkeit gibst, zwischen einem „hellen“ und einem „dunklen“ Theme zu wählen.
Du kennst dieses Konzept vielleicht schon von deinem Computer- oder Smartphone-Betriebssystem. Bei den meisten Betriebssystemen kannst du zwischen einem hellen und einem dunklen Modus für die Benutzeroberfläche wählen, bei einigen kannst du sogar je nach Tageszeit automatisch zwischen dem hellen und dem dunklen Modus wechseln.
Das ist die gleiche Grundidee für den WordPress-Dark Mode. Besucher/innen können über eine Schaltfläche oder ein anderes Interface-Element ganz einfach zwischen dem hellen und dem dunklen Modus umschalten. Der Inhalt ist in beiden Modi genau derselbe – der einzige Unterschied ist das Farbschema.
Hier ist ein Beispiel für unsere WordPress-Testseite im Standardmodus „hell“:
Und hier ist dieselbe Seite im Dark Mode:
Unsere Testseite wählt automatisch aus, welche Version angezeigt werden soll, je nachdem, welches Betriebssystem der Besucher bevorzugt. Mit dem Widget in der rechten unteren Ecke können die Nutzerinnen und Nutzer ihre Erfahrungen auch manuell anpassen.
Warum den Dark Mode auf WordPress anbieten?
Es gibt viele Gründe, warum du den Dark Mode auf deiner Website anbieten solltest. Sie reichen von einfachen Nutzerpräferenzen bis hin zur besseren Zugänglichkeit deiner Website und einem gesünderen Erlebnis für die Besucher.
Gehen wir sie mal durch..
Der Dark Mode macht deine Website zugänglicher
Ein großer Vorteil des Dark Mode ist, dass er dazu beiträgt, deine Website barrierefreier zu machen.
Barrierefreiheit wird manchmal mit a11y abgekürzt und bezieht sich darauf, dass deine Website von möglichst vielen Menschen genutzt werden kann, auch von Menschen mit Behinderungen.
Ein Beispiel für Barrierefreiheit ist die Sicherstellung, dass Menschen, die deine Website mit einem Bildschirmlesegerät besuchen, trotzdem ein gutes Erlebnis haben.
Barrierefreiheit ist nicht nur eine gute Sache, die es allen Menschen erleichtert, deine Website zu nutzen, sondern ist in vielen Ländern auch gesetzlich vorgeschrieben. So gibt es zum Beispiel den Americans With Disabilities Act (ADA) und den European Accessibility Act.
Der Dark Mode ist zwar nicht direkt Teil der Web Content Accessibility Guidelines (WCAG), aber er kann die Barrierefreiheit auf andere Weise verbessern.
Hier sind einige bemerkenswerte Bereiche, in denen der Dark Mode die Barrierefreiheit verbessern kann:
- Verbesserter Kontrast für Textinhalte. Der Dark Mode hat in der Regel einen sehr starken Kontrast zwischen den Hintergrundfarben und den Textfarben. Das kann es für Menschen mit Sehschwäche einfacher machen, Inhalte zu lesen und zu konsumieren. Ein hoher Kontrast ist Teil der WCAG, also kann das Anbieten des Dark Mode indirekt helfen, die WCAG zu erfüllen.
- Leichtere Verständlichkeit für manche Besucher. Besucher/innen, die an Legasthenie oder anderen Sehstörungen leiden, können Schwierigkeiten haben, schwarzen Text auf weißem Hintergrund zu interpretieren, daher kann der Dark Mode diesen Besucher/innen ein besseres Erlebnis bieten. Dieses Problem wird Skotopisches Sensibilitätssyndrom oder Irlen-Syndrom genannt.
- Weniger Probleme für Menschen, die unter Migräne leiden. Menschen, die Probleme mit Migräne haben, wird oft empfohlen, helles Licht zu vermeiden. Indem du deine Website dunkel gestaltest, können diese Besucher/innen deine Website genießen und gleichzeitig das Risiko minimieren, dass sich ihre Migräne verschlimmert.
Allerdings ist der Dark Mode nicht in jeder Situation die beste Option für die Barrierefreiheit. Menschen, die an Astigmatismus leiden, können zum Beispiel Schwierigkeiten haben, hellen Text auf einem dunklen Hintergrund zu lesen, da dies zu einem verschwommenen Effekt führen kann, der „Lichthof“ genannt wird. Das ist ein Grund, warum es von Vorteil sein kann, den Nutzern die Möglichkeit zu geben, zwischen dem hellen und dem dunklen Modus zu wählen.
Der Dark Mode kann gesünder für deine Besucher sein
Das Anbieten des Dark Mode auf einer Website kann auf verschiedene Weise zu einem gesünderen Erlebnis für deine Besucher/innen beitragen.
Erstens kann der Dark Mode deinen Besuchern helfen, besser zu schlafen, besonders wenn sie kurz vor dem Schlafengehen surfen. Schlafexperten empfehlen, dass Menschen in den Stunden vor dem Schlafengehen helles Licht vermeiden sollten.
Je heller und leuchtender deine Website ist, desto schlechter ist sie für die Schlafhygiene deiner Besucher/innen. Indem du einen Dark Mode anbietest, kannst du deinen Besuchern die Möglichkeit geben, mit deiner WordPress-Website zu interagieren, ohne ihren Schlafrhythmus zu beeinträchtigen.
Viele Dark Mode-Implementierungen können den Dark Mode auch automatisch aktivieren, je nachdem, welches Betriebssystem der Besucher eingestellt hat. Wenn ein Besucher sein Betriebssystem so konfiguriert, dass es vor dem Schlafengehen automatisch in den Dark Mode wechselt, kann deine Website diesem Zeitplan folgen.
Der Dark Mode kann auch die Augen der Besucher/innen schonen und zu weniger Ermüdung der Augen führen. In einer Studie der University of Central Florida (UCF) stellten die Studienautoren zum Beispiel fest, dass „die visuelle Ermüdung der Teilnehmer im Dark Mode deutlich geringer war als im hellen Modus“
Außerdem hatten die Teilnehmer/innen im Dark Mode eine höhere Sehschärfe und beendeten die Tests der Studie „mit deutlich weniger Fehlern im Dark Mode als im hellen Modus.“
Der Dark Mode kann weniger Energie verbrauchen
Das ist zwar nicht für jeden Besucher ein Vorteil, aber ein weiterer kleiner Vorteil des Dark Mode ist, dass er auf OLED-Bildschirmen weniger Energie verbraucht. Da OLED-Bildschirme in der Lage sind, einzelne Pixel abzuschalten, anstatt den gesamten Bildschirm zu beleuchten, benötigen OLED-Bildschirme weniger Energie, um dunkle Pixel anzuzeigen.
Die genaue Energieeinsparung hängt von den Helligkeitseinstellungen des Bildschirms ab, kann aber von bescheidenen 3 % bis 9 % bei geringer Helligkeit bis zu 39 % bis 47 % reichen, wenn die Bildschirmhelligkeit höher eingestellt ist.
Diese Zahlen stammen aus einer Studie der Purdue University, die den Energieverbrauch des Bildschirms bei verschiedenen Helligkeitsstufen untersucht hat.
Manche Menschen bevorzugen einfach den Dark Mode
Abgesehen von den oben genannten Vorteilen ist es auch erwähnenswert, dass einige deiner Besucher/innen den Dark Mode nur aufgrund ihrer persönlichen Vorlieben nutzen möchten.
Diese Vorlieben können aus den oben genannten Vorteilen resultieren, oder jemand bevorzugt den Dark Mode einfach aus seinen eigenen Gründen.
Indem du den Dark Mode als Option anbietest, kannst du für diese Besucher/innen ein besseres Nutzererlebnis schaffen.
4 Möglichkeiten, den Dark Mode in WordPress zu implementieren
Wenn du von der Idee überzeugt bist, den Dark Mode in WordPress einzuführen, kannst du dies auf verschiedene Weise tun.
Im Folgenden stellen wir dir vier verschiedene Möglichkeiten vor:
1. Ein WordPress-Plugin für den Dark Mode verwenden
Wenn du nicht mit Code arbeiten willst, ist eine der einfachsten Möglichkeiten, deiner Website einen Dark Mode hinzuzufügen, die Verwendung eines WordPress-Plugins für den Dark Mode.
Die meisten dieser Plugins sind so einfach zu bedienen, weil sie im Grunde nur Plug-and-Play sind. Du kannst den Dark Mode innerhalb weniger Minuten einrichten und bei Bedarf anpassen.
Hier siehst du zum Beispiel, wie es mit einer der beliebtesten Optionen funktioniert – dem kostenlosen WP Dark Mode Plugin auf WordPress.org.
Wenn du das Plugin aktivierst, hast du sofort einen funktionierenden Dark Mode auf deiner Website. Es ist sogar das gleiche Plugin, das wir für die Beispiel-Screenshots oben verwendet haben.
Es wählt automatisch aus, welche Version verwendet werden soll, je nach den Einstellungen des Betriebssystems des jeweiligen Besuchers. Anschließend können die Nutzerinnen und Nutzer manuell zwischen den Modi wechseln, indem sie ein schwebendes Widget in der unteren rechten Ecke verwenden.
Wenn du anpassen möchtest, wie der Dark Mode funktioniert, kannst du die Einstellungen des Plugins aufrufen. Dort kannst du die Stile anpassen, auswählen, wie du den Standardmodus nutzen willst und vieles mehr.
Wenn du dich für ein Plugin interessierst, findest du hier einige beliebte kostenlose Plugins für den Dark Mode, die du in Betracht ziehen kannst:
Da diese Plugins große Auswirkungen auf deine Frontend-Seite haben können, empfehlen wir dir, sie zu testen, bevor du sie auf deiner Website aktivierst.
Wenn du das Managed WordPress Hosting von Kinsta nutzt, kannst du die Staging-Funktion von Kinsta verwenden, um diese Plugins in einer sicheren Sandbox-Version deiner Website zu testen.
2. Wähle ein Theme, das den Dark Mode bereits unterstützt
Eine weitere codefreie Möglichkeit, auf den Dark Mode zuzugreifen, ist die Wahl eines WordPress-Themes mit integrierter Dark Mode-Funktion.
Das kostenlose Kanso-Theme von Rich Tabor verfügt zum Beispiel über eine integrierte Dark Mode-Funktion, die du auf Richs persönlicher Website in Aktion sehen kannst.
Wenn du deine Website bereits mit einem anderen Theme erstellt hast, lohnt es sich wahrscheinlich nicht, das Theme zu wechseln, nur um den Dark Mode zu nutzen. Wenn du jedoch noch an der Erstellung deiner Website arbeitest und dir der Dark Mode wichtig ist, solltest du ihn bei der Auswahl eines WordPress-Themes in die Liste der zu berücksichtigenden Funktionen aufnehmen.
3. Verwende eine JavaScript-Bibliothek für den Dark Mode
Wenn du gerne mit Code arbeitest, gibt es auch vorgefertigte JavaScript-Bibliotheken, die du verwenden kannst, um den Dark Mode zu deiner Website hinzuzufügen.
Wenn du ein WordPress-Entwickler bist, kannst du diese Bibliotheken auch verwenden, um den Dark Mode ganz einfach zu einem Plugin oder Theme hinzuzufügen, das du gerade entwickelst. Einige der Plugins für den Dark Mode auf WordPress.org basieren sogar auf diesen Bibliotheken.
Es gibt verschiedene Bibliotheken für den Dark Mode, aber hier sind zwei der beliebtesten Optionen:
- darkmode.js
- drkmd.js
Wenn du eine dieser Bibliotheken verwenden möchtest, empfehlen wir dir, sie auf einer Staging-Website zu testen, bevor du den Code in deine Live-Website einbaust. Wenn du deine WordPress-Website bei Kinsta hostest, kannst du auch hier die integrierte Staging-Funktion von Kinsta nutzen.
darkmode.js
Darkmode.js nutzt VanillajS und CSS mix-blend-mode, um den Dark Mode ohne zusätzliche Konfiguration hinzuzufügen. Standardmäßig fügt es einen schwebenden Schalter hinzu, mit dem Besucher zwischen dem dunklen und dem hellen Modus wechseln können.
Beim ersten Besuch wählt es den Modus anhand der Einstellungen des Betriebssystems aus und unterstützt auch die lokale Speicherung, so dass die Einstellungen der Besucher für zukünftige Besuche gespeichert werden. Auf der oben verlinkten darkmode.js-Seite kannst du dir eine Vorschau auf die Funktion ansehen.
Da es mix-blend-mode verwendet und du nicht deine eigenen CSS-Regeln hinzufügen musst, ist es so gut wie Plug-and-Play.
drkmd.js
Drkmd.js verfolgt einen etwas anderen Ansatz. Anstatt CSS mix-blend-mode zu verwenden, um automatisch einen Dark Mode für deine Website zu erstellen, kannst du stattdessen die CSS-Regeln angeben, die du für den Dark Mode verwenden möchtest. Diese Stilregeln kannst du dann mit den Klassen theme-light und theme-dark zu deiner Website hinzufügen.
Außerdem kannst du ganz einfach einen eigenen Schalter hinzufügen, um zwischen den Modi zu wechseln. Dazu fügst du das Attribut data-drkmd-attach zum Skript-Tag hinzu.
Es enthält auch andere hilfreiche Funktionen, wie z. B. die Möglichkeit, die Betriebssystemeinstellungen der Benutzer/innen automatisch zu erkennen und die Auswahl der Benutzer/innen im lokalen Speicher zu speichern.
4. Verwende deine eigene Code-Lösung
Neben der Verwendung einer JavaScript-Bibliothek gibt es auch andere codebasierte Lösungen, die du implementieren kannst, um den Dark Mode zu deiner Website hinzuzufügen.
Diese funktionieren in der Regel so, dass ein Satz CSS-Regeln für den hellen Modus und dann ein anderer Satz Regeln für den Dark Mode angewendet wird.
Eine Möglichkeit wäre, dies mit jQuery zu tun, wie in diesem Leitfaden beschrieben. Im Wesentlichen fügst du CSS-Regeln sowohl für den hellen als auch für den Dark Mode hinzu.
Dann kannst du eine Schaltfläche oder eine Art Schalter hinzufügen, um den Dark Mode zu aktivieren. Wenn ein Nutzer diesen Schalter aktiviert, kannst du mit JavaScript festlegen, welche CSS-Klassen verwendet werden sollen. In der oben verlinkten Anleitung wird dies mit jQuery und den Methoden hasClass(), addClass() und removeClass() erreicht.
Du kannst auch komplexer werden, wenn du willst. In diesem JavaScript-basierten Tutorial wird dir zum Beispiel erklärt, wie du den Dark Mode deiner Website um zwei wichtige Funktionen erweitern kannst:
- Er kann automatisch die bevorzugten Modi der Nutzer/innen auf der Grundlage ihrer Systemeinstellungen erkennen.
- Sie kann die Auswahl der Nutzer/innen speichern und automatisch den richtigen Modus laden, wenn sie wieder auf deine Seite kommen.
Insgesamt ist es wahrscheinlich einfacher, eine der oben genannten JavaScript-Bibliotheken für den Dark Mode zu verwenden. Aber wenn du das nicht tun willst, bieten diese Methoden eine weitere codebasierte Alternative.
So aktivierst du den Dark Mode im WordPress Dashboard
Bis jetzt haben wir uns darauf konzentriert, wie du den Dark Mode zu deiner WordPress-Website im Frontend hinzufügst. Vielleicht bist du aber auch daran interessiert, einen Dark Mode für das WordPress-Dashboard hinzuzufügen, damit du deine Website über eine benutzerfreundlichere Oberfläche verwalten kannst.
Denn warum sollten nur die Besucher deiner Website von den oben genannten Vorteilen profitieren können?
Wenn du dein WordPress-Dashboard mit einem Dark Mode ausstatten willst, ist die einfachste Möglichkeit, ein Plugin zu verwenden. Es gibt zwei Hauptkategorien von Plugins, die du finden kannst:
- Plugins, die die gleiche Verwaltungsoberfläche beibehalten, aber nur die Stile ändern, um den Dark Mode zu aktivieren.
- Plugins, die eine benutzerdefinierte Dashboard-Oberfläche erstellen und auch den Dark Mode anbieten.
Wenn du das WordPress-Dashboard beibehalten, aber einen Dark Mode hinzufügen möchtest, kannst du das Plugin Dark Mode for WP Dashboard verwenden, das wie auf dem Screenshot unten aussieht.
Einige der oben genannten Plugins für den Dark Mode im Frontend bieten auch Funktionen zur Aktivierung des Dark Mode im WordPress-Dashboard, wie z. B. das WP Dark Mode Plugin.
Wenn du ein völlig neues Dashboard-Erlebnis mit einer Dark Mode-Option ausprobieren möchtest, kannst du diese Plugins in Betracht ziehen:
Zusammenfassung
Wenn du den Dark Mode als Option zu deiner Website hinzufügst, kann das die Barrierefreiheit verbessern, den Besuchern ein gesünderes Erlebnis bieten, den Energieverbrauch auf manchen Bildschirmen senken und allgemein die persönlichen Vorlieben einiger Nutzer erfüllen.
Wenn du den Dark Mode zu WordPress hinzufügen möchtest, hast du viele Möglichkeiten. Für codefreie Lösungen kannst du ein Dark Mode-Plugin oder ein Theme mit integriertem Dark Mode verwenden. Für etwas technischere Optionen kannst du eine JavaScript-Bibliothek für den Dark Mode verwenden oder deine eigene Lösung programmieren.
Da das Hinzufügen des Dark Mode große Auswirkungen auf das Erscheinungsbild deiner Website hat, solltest du ihn gründlich testen, bevor du ihn in deine WordPress-Website integrierst.
Mit dem verwalteten WordPress-Hosting von Kinsta kannst du den Dark Mode sicher testen, indem du die integrierte Staging-Funktion von Kinsta nutzt und die Änderungen erst dann anwendest, wenn du sicher bist, dass alles richtig funktioniert.
Schreibe einen Kommentar