\n
Was ist der WordPress-Dark-Mode?<\/h2>\n
Der WordPress-Dark Mode bedeutet, dass du den Besuchern deiner Website die M\u00f6glichkeit gibst, zwischen einem „hellen“ und einem „dunklen“ Theme zu w\u00e4hlen.<\/p>\n
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\u00fcr die Benutzeroberfl\u00e4che w\u00e4hlen, bei einigen kannst du sogar je nach Tageszeit automatisch zwischen dem hellen und dem dunklen Modus wechseln.<\/p>\n
Das ist die gleiche Grundidee f\u00fcr den WordPress-Dark Mode. Besucher\/innen k\u00f6nnen \u00fcber eine Schaltfl\u00e4che 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.<\/p>\n
Hier ist ein Beispiel f\u00fcr unsere WordPress-Testseite im Standardmodus „hell“:<\/p>\n Und hier ist dieselbe Seite im Dark Mode:<\/p>\n Unsere Testseite w\u00e4hlt automatisch aus, welche Version angezeigt werden soll, je nachdem, welches Betriebssystem der Besucher bevorzugt. Mit dem Widget in der rechten unteren Ecke k\u00f6nnen die Nutzerinnen und Nutzer ihre Erfahrungen auch manuell anpassen.<\/p>\n Es gibt viele Gr\u00fcnde, warum du den Dark Mode auf deiner Website anbieten solltest. Sie reichen von einfachen Nutzerpr\u00e4ferenzen bis hin zur besseren Zug\u00e4nglichkeit deiner Website und einem ges\u00fcnderen Erlebnis f\u00fcr die Besucher.<\/p>\n Gehen wir sie mal durch..<\/p>\n Ein gro\u00dfer Vorteil des Dark Mode ist, dass er dazu beitr\u00e4gt, deine Website barrierefreier zu machen<\/a>.<\/p>\n Barrierefreiheit wird manchmal mit a11y abgek\u00fcrzt und bezieht sich darauf, dass deine Website von m\u00f6glichst vielen Menschen genutzt werden kann, auch von Menschen mit Behinderungen.<\/p>\n Ein Beispiel f\u00fcr Barrierefreiheit ist die Sicherstellung, dass Menschen, die deine Website mit einem Bildschirmleseger\u00e4t besuchen, trotzdem ein gutes Erlebnis haben.<\/p>\n Barrierefreiheit ist nicht nur eine gute Sache, die es allen Menschen erleichtert, deine Website zu nutzen, sondern ist in vielen L\u00e4ndern auch gesetzlich vorgeschrieben. So gibt es zum Beispiel den Americans With Disabilities Act (ADA) und den European Accessibility Act<\/a>.<\/p>\n Der Dark Mode ist zwar nicht direkt Teil der Web Content Accessibility Guidelines (WCAG)<\/a>, aber er kann die Barrierefreiheit auf andere Weise verbessern.<\/p>\n Hier sind einige bemerkenswerte Bereiche, in denen der Dark Mode die Barrierefreiheit verbessern kann:<\/p>\n Allerdings ist der Dark Mode nicht in jeder Situation die beste Option f\u00fcr die Barrierefreiheit. Menschen, die an Astigmatismus leiden<\/a>, k\u00f6nnen zum Beispiel Schwierigkeiten haben, hellen Text auf einem dunklen Hintergrund zu lesen, da dies zu einem verschwommenen Effekt f\u00fchren kann, der „Lichthof“ genannt wird. Das ist ein Grund, warum es von Vorteil sein kann, den Nutzern die M\u00f6glichkeit zu geben, zwischen dem hellen und dem dunklen Modus zu w\u00e4hlen.<\/p>\n Das Anbieten des Dark Mode auf einer Website kann auf verschiedene Weise zu einem ges\u00fcnderen Erlebnis f\u00fcr deine Besucher\/innen beitragen.<\/p>\n 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<\/a>.<\/p>\n Je heller und leuchtender deine Website ist, desto schlechter ist sie f\u00fcr die Schlafhygiene deiner Besucher\/innen. Indem du einen Dark Mode anbietest, kannst du deinen Besuchern die M\u00f6glichkeit geben, mit deiner WordPress-Website zu interagieren, ohne ihren Schlafrhythmus zu beeintr\u00e4chtigen.<\/p>\n Viele Dark Mode-Implementierungen k\u00f6nnen 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.<\/p>\n Der Dark Mode kann auch die Augen der Besucher\/innen schonen und zu weniger Erm\u00fcdung der Augen f\u00fchren. In einer Studie der University of Central Florida (UCF)<\/a> stellten die Studienautoren zum Beispiel fest, dass „die visuelle Erm\u00fcdung der Teilnehmer im Dark Mode deutlich geringer war als im hellen Modus“<\/p>\n Au\u00dferdem hatten die Teilnehmer\/innen im Dark Mode eine h\u00f6here Sehsch\u00e4rfe und beendeten die Tests der Studie „mit deutlich weniger Fehlern im Dark Mode als im hellen Modus.“<\/p>\n Das ist zwar nicht f\u00fcr 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\u00f6tigen OLED-Bildschirme weniger Energie, um dunkle Pixel anzuzeigen.<\/p>\n Die genaue Energieeinsparung h\u00e4ngt 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\u00f6her eingestellt ist.<\/p>\n Diese Zahlen stammen aus einer Studie der Purdue University<\/a>, die den Energieverbrauch des Bildschirms bei verschiedenen Helligkeitsstufen untersucht hat.<\/p>\n Abgesehen von den oben genannten Vorteilen ist es auch erw\u00e4hnenswert, dass einige deiner Besucher\/innen den Dark Mode nur aufgrund ihrer pers\u00f6nlichen Vorlieben nutzen m\u00f6chten.<\/p>\n Diese Vorlieben k\u00f6nnen aus den oben genannten Vorteilen resultieren, oder jemand bevorzugt den Dark Mode einfach aus seinen eigenen Gr\u00fcnden.<\/p>\n Indem du den Dark Mode als Option anbietest, kannst du f\u00fcr diese Besucher\/innen ein besseres Nutzererlebnis<\/a> schaffen.<\/p>\n Wenn du von der Idee \u00fcberzeugt bist, den Dark Mode in WordPress einzuf\u00fchren, kannst du dies auf verschiedene Weise tun.<\/p>\n Im Folgenden stellen wir dir vier verschiedene M\u00f6glichkeiten vor:<\/p>\n Wenn du nicht mit Code arbeiten willst, ist eine der einfachsten M\u00f6glichkeiten, deiner Website einen Dark Mode hinzuzuf\u00fcgen, die Verwendung eines WordPress-Plugins f\u00fcr den Dark Mode.<\/p>\n 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.<\/p>\n Hier siehst du zum Beispiel, wie es mit einer der beliebtesten Optionen funktioniert – dem kostenlosen WP Dark Mode Plugin<\/a> auf WordPress.org.<\/p>\n Wenn du das Plugin aktivierst, hast du sofort einen funktionierenden Dark Mode auf deiner Website. Es ist sogar das gleiche Plugin, das wir f\u00fcr die Beispiel-Screenshots oben verwendet haben.<\/p>\n Es w\u00e4hlt automatisch aus, welche Version verwendet werden soll, je nach den Einstellungen des Betriebssystems des jeweiligen Besuchers. Anschlie\u00dfend k\u00f6nnen die Nutzerinnen und Nutzer manuell zwischen den Modi wechseln, indem sie ein schwebendes Widget in der unteren rechten Ecke verwenden.<\/p>\n Wenn du anpassen m\u00f6chtest, wie der Dark Mode funktioniert, kannst du die Einstellungen des Plugins aufrufen. Dort kannst du die Stile anpassen, ausw\u00e4hlen, wie du den Standardmodus nutzen willst und vieles mehr.<\/p>\n Wenn du dich f\u00fcr ein Plugin interessierst, findest du hier einige beliebte kostenlose Plugins f\u00fcr den Dark Mode, die du in Betracht ziehen kannst:<\/p>\n Da diese Plugins gro\u00dfe Auswirkungen auf deine Frontend-Seite haben k\u00f6nnen, empfehlen wir dir, sie zu testen, bevor du sie auf deiner Website aktivierst.<\/p>\n Wenn du das Managed WordPress Hosting von Kinsta<\/a> nutzt, kannst du die Staging-Funktion von Kinsta<\/a> verwenden, um diese Plugins in einer sicheren Sandbox-Version deiner Website zu testen.<\/p>\n Eine weitere codefreie M\u00f6glichkeit, auf den Dark Mode zuzugreifen, ist die Wahl eines WordPress-Themes mit integrierter Dark Mode-Funktion.<\/p>\n Das kostenlose Kanso-Theme von Rich Tabor<\/a> verf\u00fcgt zum Beispiel \u00fcber eine integrierte Dark Mode-Funktion, die du auf Richs pers\u00f6nlicher Website<\/a> in Aktion sehen kannst.<\/p>\n Wenn du deine Website bereits mit einem anderen Theme erstellt hast, lohnt es sich wahrscheinlich nicht, das Theme zu wechseln<\/a>, 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<\/a> in die Liste der zu ber\u00fccksichtigenden Funktionen<\/a> aufnehmen.<\/p>\n Wenn du gerne mit Code arbeitest, gibt es auch vorgefertigte JavaScript-Bibliotheken<\/a>, die du verwenden kannst, um den Dark Mode zu deiner Website hinzuzuf\u00fcgen.<\/p>\n Wenn du ein WordPress-Entwickler bist, kannst du diese Bibliotheken auch verwenden, um den Dark Mode ganz einfach zu einem Plugin oder Theme hinzuzuf\u00fcgen, das du gerade entwickelst<\/a>. Einige der Plugins f\u00fcr den Dark Mode auf WordPress.org basieren sogar auf diesen Bibliotheken.<\/p>\n Es gibt verschiedene Bibliotheken f\u00fcr den Dark Mode, aber hier sind zwei der beliebtesten Optionen:<\/p>\n Wenn du eine dieser Bibliotheken verwenden m\u00f6chtest, 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<\/a>, kannst du auch hier die integrierte Staging-Funktion von Kinsta nutzen.<\/p>\n Darkmode.js<\/a> nutzt VanillajS und CSS Beim ersten Besuch w\u00e4hlt es den Modus anhand der Einstellungen des Betriebssystems aus und unterst\u00fctzt auch die lokale Speicherung, so dass die Einstellungen der Besucher f\u00fcr zuk\u00fcnftige Besuche gespeichert werden. Auf der oben verlinkten darkmode.js-Seite kannst du dir eine Vorschau auf die Funktion ansehen.<\/p>\n Da es Drkmd.js<\/a> verfolgt einen etwas anderen Ansatz. Anstatt CSS Au\u00dferdem kannst du ganz einfach einen eigenen Schalter hinzuf\u00fcgen, um zwischen den Modi zu wechseln. Dazu f\u00fcgst du das Attribut Es enth\u00e4lt auch andere hilfreiche Funktionen, wie z. B. die M\u00f6glichkeit, die Betriebssystemeinstellungen der Benutzer\/innen automatisch zu erkennen und die Auswahl der Benutzer\/innen im lokalen Speicher zu speichern.<\/p>\n Neben der Verwendung einer JavaScript-Bibliothek gibt es auch andere codebasierte L\u00f6sungen, die du implementieren kannst, um den Dark Mode zu deiner Website hinzuzuf\u00fcgen.<\/p>\n Diese funktionieren in der Regel so, dass ein Satz CSS-Regeln f\u00fcr den hellen Modus und dann ein anderer Satz Regeln f\u00fcr den Dark Mode angewendet wird.<\/p>\n Eine M\u00f6glichkeit w\u00e4re, dies mit jQuery zu tun, wie in diesem Leitfaden beschrieben<\/a>. Im Wesentlichen f\u00fcgst du CSS-Regeln sowohl f\u00fcr den hellen als auch f\u00fcr den Dark Mode hinzu.<\/p>\n Dann kannst du eine Schaltfl\u00e4che oder eine Art Schalter hinzuf\u00fcgen, 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 Du kannst auch komplexer werden, wenn du willst. In diesem JavaScript-basierten Tutorial<\/a> wird dir zum Beispiel erkl\u00e4rt, wie du den Dark Mode deiner Website um zwei wichtige Funktionen erweitern kannst:<\/p>\n Insgesamt ist es wahrscheinlich einfacher, eine der oben genannten JavaScript-Bibliotheken f\u00fcr den Dark Mode zu verwenden. Aber wenn du das nicht tun willst, bieten diese Methoden eine weitere codebasierte Alternative.<\/p>\n Bis jetzt haben wir uns darauf konzentriert, wie du den Dark Mode zu deiner WordPress-Website im Frontend hinzuf\u00fcgst. Vielleicht bist du aber auch daran interessiert, einen Dark Mode f\u00fcr das WordPress-Dashboard hinzuzuf\u00fcgen, damit du deine Website \u00fcber eine benutzerfreundlichere Oberfl\u00e4che verwalten kannst.<\/p>\n Denn warum sollten nur die Besucher deiner Website von den oben genannten Vorteilen profitieren k\u00f6nnen?<\/p>\n Wenn du dein WordPress-Dashboard mit einem Dark Mode ausstatten willst, ist die einfachste M\u00f6glichkeit, ein Plugin zu verwenden. Es gibt zwei Hauptkategorien von Plugins, die du finden kannst:<\/p>\n Wenn du das WordPress-Dashboard beibehalten, aber einen Dark Mode hinzuf\u00fcgen m\u00f6chtest, kannst du das Plugin Dark Mode for WP Dashboard<\/a> verwenden, das wie auf dem Screenshot unten aussieht.<\/p>\n Einige der oben genannten Plugins f\u00fcr den Dark Mode im Frontend bieten auch Funktionen zur Aktivierung des Dark Mode im WordPress-Dashboard, wie z. B. das WP Dark Mode Plugin.<\/p>\n Wenn du ein v\u00f6llig neues Dashboard-Erlebnis mit einer Dark Mode-Option ausprobieren m\u00f6chtest, kannst du diese Plugins in Betracht ziehen:<\/p>\n Wenn du den Dark Mode als Option zu deiner Website hinzuf\u00fcgst, kann das die Barrierefreiheit verbessern, den Besuchern ein ges\u00fcnderes Erlebnis bieten, den Energieverbrauch auf manchen Bildschirmen senken und allgemein die pers\u00f6nlichen Vorlieben einiger Nutzer erf\u00fcllen.<\/p>\n Wenn du den Dark Mode zu WordPress hinzuf\u00fcgen m\u00f6chtest, hast du viele M\u00f6glichkeiten. F\u00fcr codefreie L\u00f6sungen kannst du ein Dark Mode-Plugin oder ein Theme mit integriertem Dark Mode verwenden. F\u00fcr etwas technischere Optionen kannst du eine JavaScript-Bibliothek f\u00fcr den Dark Mode verwenden oder deine eigene L\u00f6sung programmieren.<\/p>\n Da das Hinzuf\u00fcgen des Dark Mode gro\u00dfe Auswirkungen auf das Erscheinungsbild deiner Website hat, solltest du ihn gr\u00fcndlich testen, bevor du ihn in deine WordPress-Website integrierst.<\/p>\n![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/light-mode-example-1024x710.jpg\")
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-example-1024x709.jpg\")
Warum den Dark Mode auf WordPress anbieten?<\/h2>\n
Der Dark Mode macht deine Website zug\u00e4nglicher<\/h3>\n
\n
Der Dark Mode kann ges\u00fcnder f\u00fcr deine Besucher sein<\/h3>\n
Der Dark Mode kann weniger Energie verbrauchen<\/h3>\n
Manche Menschen bevorzugen einfach den Dark Mode<\/h3>\n
4 M\u00f6glichkeiten, den Dark Mode in WordPress zu implementieren<\/h2>\n
1. Ein WordPress-Plugin f\u00fcr den Dark Mode verwenden<\/h3>\n
![\"WP](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/wp-dark-mode-plugin-settings-1024x705.jpg\")
\n
2. W\u00e4hle ein Theme, das den Dark Mode bereits unterst\u00fctzt<\/h3>\n
![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/rich-tabor-dark-mode-theme-1024x804.jpg\")
3. Verwende eine JavaScript-Bibliothek f\u00fcr den Dark Mode<\/h3>\n
\n
darkmode.js<\/h4>\n
mix-blend-mode<\/code><\/a>, um den Dark Mode ohne zus\u00e4tzliche Konfiguration hinzuzuf\u00fcgen. Standardm\u00e4\u00dfig f\u00fcgt es einen schwebenden Schalter hinzu, mit dem Besucher zwischen dem dunklen und dem hellen Modus wechseln k\u00f6nnen.<\/p>\nmix-blend-mode<\/code> verwendet und du nicht deine eigenen CSS-Regeln hinzuf\u00fcgen musst, ist es so gut wie Plug-and-Play.<\/p>\ndrkmd.js<\/h4>\n
mix-blend-mode<\/code> zu verwenden, um automatisch einen Dark Mode f\u00fcr deine Website zu erstellen, kannst du stattdessen die CSS-Regeln<\/a> angeben, die du f\u00fcr den Dark Mode verwenden m\u00f6chtest. Diese Stilregeln kannst du dann mit den Klassen theme-light<\/code> und theme-dark<\/code> zu deiner Website hinzuf\u00fcgen.<\/p>\ndata-drkmd-attach<\/code> zum Skript-Tag hinzu.<\/p>\n4. Verwende deine eigene Code-L\u00f6sung<\/h3>\n
hasClass()<\/code>, addClass()<\/code> und removeClass()<\/code> erreicht.<\/p>\n\n
So aktivierst du den Dark Mode im WordPress Dashboard<\/h2>\n
\n
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-wordpress-dashboard-1024x736.jpg\")
\n
Zusammenfassung<\/h2>\n