Das Hinzufügen des Dunkelmodus zu WordPress-Websites ist zu einem heißen Thema unter unseren Lesern geworden. 🌙
Es geht nicht nur darum, Trends zu folgen. Forschungen zeigen, dass der Dunkelmodus die Augenbelastung für Leser bei Nacht reduzieren und potenziell die Akkulaufzeit von Mobilgeräten verlängern kann.
Während viele Website-Besitzer davon ausgehen, dass dies technisches Fachwissen erfordert, haben moderne WordPress-Tools dies viel zugänglicher gemacht.💡
In diesem Leitfaden teilen wir Ihnen unseren bewährten Weg mit, um den Dunkelmodus in WordPress hinzuzufügen. Wir haben diese Lösung für verschiedene Themes und Setups getestet, um sicherzustellen, dass sie zuverlässig und einfach hinzuzufügen ist.

⚡ Kurze Zusammenfassung: So fügen Sie den Dunkelmodus in WordPress hinzu
Der einfachste Weg, den Dunkelmodus zu WordPress hinzuzufügen, ist die Installation des WP Dark Mode Plugins.
Es fügt automatisch einen anpassbaren Umschalter zu Ihrer Website hinzu, damit Besucher ihre bevorzugte Option wählen können, und unterstützt sogar den Dunkelmodus im WordPress-Adminbereich.
Was ist der Dunkelmodus und warum sollte man ihn zu seiner Website hinzufügen?
Viele mobile Geräte und Computer verwenden den Dunkelmodus, um die Menge an weißem Licht zu minimieren, das vom Bildschirm kommt. Dies kann die Augenbelastung reduzieren, insbesondere bei schlechten Lichtverhältnissen.
Die Verwendung des Dunkelmodus ermöglicht es Ihnen, Computer und Mobilgeräte bis spät in die Nacht zu nutzen. Es hilft, weißes und blaues Licht daran zu hindern, Ihren Schlaf zu stören.
Der Dunkelmodus ist auch für Menschen mit Sehbehinderungen hilfreich. Er verbessert die Zugänglichkeit für Benutzer mit Lichtempfindlichkeit (Photophobie).
Einige Geräte verfügen über einen integrierten Nachtmodus, der einfach wärmere Farbtöne verwendet. Der Dunkelmodus fügt jedoch tatsächlich dunkle Farben zum Hintergrund des Geräts hinzu. Einige beliebte Websites wie YouTube bieten ein integriertes dunkles Farbschema.

Auf Desktop-Computern können Sie Websites im Dunkelmodus besuchen, indem Sie eine Chrome-Erweiterung wie Night Eye verwenden.
So sieht die WPBeginner-Website mit dieser Erweiterung aus:

Durch das Hinzufügen eines Dunkelmodus-Schalters zu Ihrer Website können Benutzer ihren bevorzugten Modus wählen, ohne eine spezielle Browsererweiterung installieren zu müssen.
Sie können sogar den Dunkelmodus zu Ihrem WordPress-Adminbereich hinzufügen. Dies kann nützlich sein, wenn Sie nachts an Ihrer Website arbeiten oder wenn Sie unter Augenbelastung leiden.
In diesem Sinne wollen wir sehen, wie Sie den Dunkelmodus zum öffentlich sichtbaren Frontend Ihrer Website und zum Admin-Bereich Ihrer WordPress-Website hinzufügen können.
Tipp: Möchten Sie ein dunkles Farbschema verwenden, auch wenn das Gerät des Besuchers im normalen oder Tageslichtmodus ist? Dann schauen Sie sich unsere Liste der besten dunklen Themes für WordPress an.
So fügen Sie Ihrer WordPress-Website den Dunkelmodus hinzu
Der einfachste Weg, einen Dunkelmodus für Ihre Website zu erstellen, ist die Verwendung von WP Dark Mode.
Dieses Plugin fügt einen Schalter hinzu, damit Besucher den Dunkelmodus auf Ihrer Website aktivieren können. Es kann sogar einen Schalter zum Adminbereich hinzufügen, sodass Sie den Dunkelmodus für das WordPress-Dashboard aktivieren können.
Sie können mehr darüber in unserem detaillierten WP Dark Mode Testbericht erfahren.
Zuerst müssen Sie das kostenlose WP Dark Mode Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.
Besuchen Sie nach der Aktivierung die Seite WP Dark Mode » Einstellungen im WordPress-Dashboard und schalten Sie den Schalter „Frontend-Dunkelmodus aktivieren“ auf „EIN“.
Sobald Sie dies getan haben, können Sie auch einen Standardmodus für das Frontend Ihrer Website wählen.
Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern.

Wechseln Sie als Nächstes zur Registerkarte „Anpassung“, um das Layout, die Größe und die Position des Schalters anzupassen.
Sie können auch die Farbe des Dark-Mode-Schalters ändern, aber dafür benötigen Sie die Pro-Version des Plugins.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Änderungen speichern“, um Ihre Einstellungen zu speichern. Besuchen Sie nun Ihre WordPress-Website, um den Dunkelmodus-Schalter in Aktion zu sehen.
Sie können Ihre Website auch auf Ihrem Mobilgerät oder Tablet besuchen. So sehen Sie, dass der Dark Mode auch auf Mobilgeräten funktioniert.

Dunkelmodus zum Admin-Bereich Ihres WordPress hinzufügen
Sie können das Admin-Farbschema in WordPress ändern, indem Sie die integrierten Einstellungen verwenden. Keines der Standard-Farbschemata reduziert jedoch das weiße Licht, das vom Bildschirm kommt.
Wenn Sie spät abends arbeiten oder unter Augenbelastung leiden, können Sie versuchen, den Dark Mode zum WordPress-Adminbereich und zum Block-Editor hinzuzufügen.
Besuchen Sie dazu die Seite WP Dark Mode » Einstellungen und wechseln Sie in der linken Spalte zur Registerkarte „Admin-Bereich Dunkelmodus“.
Schalten Sie hier den Schalter für die Option „Admin-Dashboard-Dunkelmodus aktivieren“ auf „EIN“ und klicken Sie auf die Schaltfläche „Änderungen speichern“.

Sobald Sie das getan haben, werden Sie feststellen, dass der Dunkelmodus-Schalter oben in Ihrem WordPress-Dashboard vorhanden ist.
Von hier aus können Sie den Schalter umlegen, um diesen Modus jederzeit zu aktivieren.

Wenn Sie auch einen Dunkelmodus für den Block-Editor hinzufügen möchten, müssen Sie den Schalter „Block-Editor Dunkelmodus“ auf „EIN“ stellen.
Klicken Sie dann auf die Schaltfläche „Änderungen speichern“.

Öffnen Sie nun eine Seite oder einen Beitrag im Inhaltseditor. Sie werden ein Dunkelmodus-Symbol oben bemerken. Klicken Sie darauf, um den Tab zu erweitern und die Option „Dunkelmodus“ auszuwählen.
So sieht Ihr Block-Editor im Dark Mode aus.

Video-Tutorial
Häufig gestellte Fragen zum Dark Mode in WordPress
Hier sind einige Fragen, die unsere Leser häufig gestellt haben, bevor sie den Dark Mode in WordPress aktiviert haben:
Hat WordPress einen Nachtmodus?
Nein, WordPress hat keine integrierte Nachtmodus-Funktion für das Frontend Ihrer Website. Um diese Funktionalität hinzuzufügen, müssen Sie ein Plugin wie WP Dark Mode verwenden oder ein bestimmtes Dark-Theme installieren.
Wie ändere ich das Theme in den Dark Mode?
Der einfachste Weg, Ihr aktuelles Theme in den Dark Mode zu ändern, ist die Installation eines Plugins, das einen Umschalter hinzufügt. Alternativ können Sie zu Darstellung » Themes navigieren und ein Theme aktivieren, das mit einem dunklen Farbschema gestaltet ist.
Was sind die Nachteile des Dark Mode?
Der Hauptnachteil ist, dass der Dunkelmodus in hellen, sonnigen Umgebungen schwer zu lesen sein kann. Darüber hinaus können Standardlogos oder transparente Bilder mit dunklen Elementen auf einem dunklen Hintergrund verschwinden oder verzerrt aussehen.
Welcher Farbmodus ist am besten für die Augen?
Der Dunkelmodus ist bei schlechten Lichtverhältnissen in der Regel am besten für Ihre Augen, da er Blendung und Bildschirmflimmern reduziert. Der helle Modus ist jedoch tagsüber oder in gut beleuchteten Räumen oft besser für die Lesbarkeit und das Textverständnis geeignet.
Wie viel Prozent der Menschen nutzen den Dunkelmodus?
Aktuelle Daten deuten darauf hin, dass über 80 % der mobilen Nutzer den Dunkelmodus auf ihren Geräten bevorzugen. Die Unterstützung dieses Modus auf Ihrer Website stellt sicher, dass Sie die überwiegende Mehrheit der Nutzerpräferenzen berücksichtigen.
Ist ein dunkles Design gesünder für die Augen?
Ja, ein dunkles Design kann gesünder für Ihre Augen sein, da es die Exposition gegenüber grellem blauen Licht minimiert. Diese Reduzierung des blauen Lichts kann helfen, digitale Augenbelastung zu verhindern und kann die Schlafqualität verbessern, wenn Sie Geräte spät in der Nacht verwenden.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie den Dunkelmodus zu Ihrer WordPress-Website hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Auswählen eines perfekten Farbschemas für Ihre WordPress-Website oder unsere Expertenauswahl für die besten WordPress Theme Builder ansehen, um Ihre Website anzupassen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.


Jiří Vaněk
Ich arbeite oft nachts an meiner Website und meine Augen ermüden manchmal vom Lichtmodus, den WordPress verwendet. Außerdem ist es nicht gut für den Schlaf. Danke für diese Anleitung, denn das Umschalten sowohl der Website als auch des Admin-Bereichs in den Dunkelmodus hilft jetzt sehr, die Augenbelastung zu reduzieren.
Oreofe Oyebamiji
Tolle Infos. Ich liebe das Plugin wirklich und es ist einfach zu bedienen
WPBeginner Support
Schön, dass Sie es hilfreich fanden!
Admin
Kurt
Ich bevorzuge generell Dunkelmodi in Apps, die sie unterstützen. Vielen Dank für diesen großartigen Tipp.
WPBeginner Support
Glad we could share this option
Admin
Iponk
Wow…nette Info, danke
WPBeginner Support
You’re welcome, glad our guide was helpful
Admin
Agung
Das ist wunderbar. Danke, ich werde es versuchen!
WPBeginner Support
Glad our guide was helpful
Admin
Bryan Durio
Dies ist ein fantastisches Plugin, um die Augen der Leute zu schonen. Ich benutze seit Jahren dunkle Farbschemata unter Windows und jetzt kann ich sie zu meiner WP-Website hinzufügen. Ich schätze Ihre Erklärung einiger Optionen. Vielen Dank!
WPBeginner Support
Glad you found our guide helpful
Admin
Richard hickman
Was bewirkt diese Funktion für Barrierefreiheitsanforderungen?
WPBeginner Support
Es würde davon abhängen, welche spezifischen Barrierefreiheitsanforderungen Sie erfüllen möchten, ob dies etwas bewirkt oder nicht.
Admin
Richard Mayowa
Es ist einfach eine zu großartige Möglichkeit
WPBeginner Support
Glad you like the available option
Admin
Jennifer C. Valerie
Das ist großartig. Danke!
WPBeginner Support
You’re welcome
Admin
Adarsh Gupta
Wow, erstaunlich.
Ich wusste nichts von dem Dark Mode. Aber es ist so einfach, den Dark Mode in WordPress hinzuzufügen.
Danke für die tolle Erklärung
WPBeginner Support
You’re welcome, glad our guide was helpful
Admin