So fügen Sie Ihrer WordPress-Website mit diesen 4 einfachen Schritten den Dunkelmodus hinzu

Veröffentlicht: 2022-06-16

Als Instagram und ein paar andere große Websites und Apps im Oktober 2019 den Dunkelmodus hinzufügten, konnten wir einen großen Anstieg des Interesses der Menschen an dieser Funktion beobachten.

How to Add Dark Mode to Your WordPress Website with These 4 Simple Steps

Aber selbst wenn wir den Ausreißer ausgeschlossen haben, nämlich Instagrams Einführung des Dunkelmodus, auch bekannt als Nachtmodus , zeigt die obige Grafik deutlich die Zunahme der Popularität der Funktion in den letzten Jahren.

Zusammen mit Instagram sind viele andere große Unternehmen in die Ära des Nachtmodus übergegangen, und Sie sollten auch in Betracht ziehen, den Wechsel vorzunehmen. Nicht nur, weil es im Trend liegt, sondern auch wegen seiner vielen Vorteile für Ihre Benutzer, einschließlich, aber nicht beschränkt auf eine verringerte Augenbelastung für Ihre Benutzer, eine längere Akkulaufzeit für die Geräte, die zum Besuch Ihrer Website verwendet werden, und die Tatsache, dass es einfach viel cooler aussieht.

OK, letzteres ist vielleicht etwas subjektiv, aber wir bleiben dabei.

Glücklicherweise ist das Hinzufügen eines dunklen Modus zu Ihrer WordPress-Website ziemlich einfach. Sie können nicht nur festlegen, wie Ihre Website jedem Benutzer angezeigt wird, sondern Sie können die Funktion auch zu Ihrem Admin-Dashboard hinzufügen und Ihren eigenen Augen eine Pause gönnen.

Wenn Sie darüber nachdenken, Ihrer Website einen Dunkelmodus hinzuzufügen, gibt es einige Möglichkeiten, dies zu tun, aber die Verwendung eines Plugins ist bei weitem die einfachste, wie Sie sich vielleicht vorstellen können.

In diesem Beitrag stellen wir ein Plugin vor, das die meisten Website-Design-Unternehmen in Los Angeles empfehlen – WP Dark Mode – und gehen alle Schritte durch, die Sie unternehmen müssen, um diese Funktionalität hinzuzufügen und anzupassen, damit sie zu Ihrer Website und Ihrem WordPress-Theme passt.

Aber zuerst werfen wir einen Blick darauf, was der Dunkelmodus ist und welche bemerkenswertesten Vorteile er hat. Weiter lesen!

Was ist der Dunkelmodus und warum ist er nützlich?

Der Dunkelmodus, auch als Nachtmodus bekannt, ist ein einfaches Umschalten der Anzeige, das das Farbschema einer Website von hell auf dunkel ändert.

Auf einer typischen Website mit schwarzen Buchstaben auf weißem Hintergrund sieht dies normalerweise so aus, als wären die Farben einfach invertiert worden, aber wie wir weiter unten erklären werden, steckt noch ein bisschen mehr dahinter.

Diese einfache Optimierung reduziert das weiße Licht, das vom Bildschirm kommt, erheblich, wodurch die Belastung der Augen verringert wird, insbesondere wenn ein Benutzer die Website abends besucht.

Die Option zum Aktivieren des Dunkelmodus ist in den meisten modernen Betriebssystemen und Webbrowsern verfügbar.

Die bemerkenswertesten Vorteile des Dunkelmodus

Wir haben bereits einige der Vorteile dieser Funktion in diesem Beitrag erwähnt, aber wir dachten, wir würden sie hier alle in einer schönen Liste mit Aufzählungszeichen für Ihre Bequemlichkeit skizzieren.

Zu den Vorteilen des Dunkelmodus gehören also die folgenden:

  • Weniger Belastung für die Augen
  • Reduzierter Energieverbrauch und längere Batterielebensdauer
  • Weniger weißes Licht von Bildschirmen
  • Verbringen Sie mehr Zeit auf Ihrer Seite

Wie Sie bereits wissen, bieten moderne Browser und Betriebssysteme bereits den Dunkelmodus als Option an, aber wenn Sie möchten, dass Ihre Website den Benutzern, die ihn bevorzugen, im richtigen Farbschema angezeigt wird, müssen Sie ihn selbst hinzufügen.

Glücklicherweise kann die Installation des WP-Dark-Mode-Plugins diesen Prozess vereinfachen und Ihnen alle Arten von Kontrolle über das Erscheinungsbild Ihrer Website im Dark-Mode geben.

Dunkelmodus vs. Nachtmodus

Bevor wir fortfahren, möchten wir ein potenzielles Problem ansprechen, mit dem aufmerksame Leser möglicherweise ein Problem haben. Wir haben nämlich die Begriffe „Dunkelmodus“ und „Nachtmodus“ in diesem Artikel synonym verwendet und werden dies auch weiterhin tun, obwohl sie technisch gesehen zwei verschiedene Funktionen beschreiben können.

Der Begriff „Nachtmodus“ wird häufig für eine Funktion verwendet, die auf den meisten modernen Smartphones verfügbar ist und bei Einbruch der Dunkelheit ganz oder teilweise blaues Licht von Ihrem Bildschirm entfernt, um die Auswirkungen der Bildschirmzeit auf Ihren Schlafzyklus zu verringern.

Wie wir jedoch bereits erklärt haben, können die beiden Begriffe synonym verwendet werden, was der Ansatz ist, den wir in diesem Beitrag gewählt haben.

Nun, da wir das aus dem Weg geräumt haben, schauen wir uns an, wie Sie Ihren WordPress-Websites den Dunkel- (oder Nacht-) Modus hinzufügen können.

So fügen Sie Ihrer WordPress-Website mit dem WP Dark Mode Plugin den Dark Mode hinzu

Nachdem Sie nun alle Gründe kennen, warum Sie Ihrer WordPress-Site den Dunkelmodus hinzufügen möchten, zeigen wir Ihnen in vier einfachen Schritten, wie Sie dies tun können.

Unsere Freunde von einer Webdesign-Firma in Miami haben uns geholfen, diese Schritt-für-Schritt-Anleitung zu erstellen, die auf einem speziellen Plugin namens WP Dark Mode basiert.

1. Installieren Sie das Plugin

Obwohl es mehrere WordPress-Plugins für den dunklen Modus gibt, fanden wir, dass WP Dark Mode am benutzerfreundlichsten und zuverlässigsten ist.

Es ist ein Plugin, mit dem Sie schnell und mühelos eine dunkle Version Ihrer Website erstellen können, ohne sich mit komplizierten Einstellungen oder Code befassen zu müssen.

Wie zu erwarten, finden Sie dieses Tool im WordPress-Plugin-Verzeichnis.

Wir gehen davon aus, dass Sie Ihrer Website bereits Plugins hinzugefügt haben, aber für alle Fälle müssen Sie nur zu Ihrem Admin-Dashboard gehen und auf der Registerkarte Plugins Neu hinzufügen auswählen.

Von dort aus können Sie WP Dark Mode finden und auf Jetzt installieren und aktivieren klicken.

2. Schalten Sie die gewünschten Einstellungen ein

Sie können den Dunkelmodus auf der Registerkarte Allgemeine Einstellungen ein- und ausschalten. Sobald Sie diese Registerkarte öffnen, sehen Sie, dass zwei Optionen bereits standardmäßig aktiviert sind.

Dies sind Frontend Dark Mode aktivieren und OS Aware Dark Mode aktivieren .

Ersteres aktiviert den Dunkelmodus auf Ihrer Website, während letzteres bedeutet, dass die Funktion automatisch aktiviert wird, wenn das Betriebssystem oder der Browser des Benutzers auf Dunkelmodus eingestellt ist.

Eine weitere Option ist Make Dark Mode Default . Dieser ist ziemlich selbsterklärend – wenn Sie ihn einschalten, sehen alle Benutzer die dunkle Version Ihrer Website, unabhängig von ihren Vorlieben.

3. Schalten Sie den Floating Switch ein und passen Sie ihn an

Wenn Sie Benutzern die Möglichkeit geben möchten, jederzeit zwischen dunklem und hellem Modus zu wechseln, können Sie auch die Option Floating Switch anzeigen aktivieren.

Diese Option macht genau das, was auf der Dose steht – platzieren Sie einen Schalter am Frontend Ihrer Website, mit dem Benutzer den Dunkelmodus nach Belieben ein- oder ausschalten können.

Sie können mit der Platzierung und dem Stil des Symbols im Abschnitt Anzeigeeinstellungen herumspielen. Ihre stilistischen Möglichkeiten sind in der kostenlosen Version des Plugins etwas eingeschränkt, aber die Schlüsselfunktionalität (Ein- oder Ausschalten des Dunkelmodus) ist vorhanden.

4. Experimentieren Sie mit verschiedenen Farbschemata im dunklen Modus

Zu diesem Zeitpunkt verfügt Ihre WordPress-Website über einen voll funktionsfähigen Dunkelmodus, und wenn das alles ist, wonach Sie gesucht haben, können Sie diesen Schritt überspringen.

Wenn Sie jedoch nicht möchten, dass Ihre Website allgemein aussieht, empfehlen wir Ihnen dringend, die Farben für den Dunkelmodus anzupassen. Sie finden alle Optionen, die Sie benötigen, im Abschnitt Stileinstellungen .

Dieser Bildschirm bietet eine Farbpalette, die zur visuellen Identität Ihrer Website passen könnte.

Wie Sie sich vorstellen können, bietet die kostenlose Version des Plugins WP Dark Mode hier etwas eingeschränkte Möglichkeiten, aber Sie sollten in der Lage sein, eine geeignete Lösung zu finden.

Wenn Sie die Farben weiter anpassen möchten, bietet die Premium-Version eine größere Auswahl an voreingestellten Farbpaletten und ermöglicht Ihnen, Ihr eigenes Schema zu erstellen.

​Bonus – Aktivierung des Dunkelmodus im WordPress-Admin-Dashboard

Wenn Sie Ihren Kunden und Interessenten alle Vorteile eines dunklen Modus im Frontend Ihrer WordPress-Website bieten möchten, warum nicht die gleiche Höflichkeit gegenüber sich selbst erweisen und den Modus auch zu Ihrem Admin-Dashboard hinzufügen?

Wenn das standardmäßige WordPress-Farbschema für Ihren Geschmack zu hell ist, hat das WP Dark Mode-Plugin die Lösung. So geht's:

  1. Installieren Sie das WP Dark Mode-Plugin – hier gibt es nicht viel zu erklären. Sehen Sie sich den obigen Abschnitt an, um Anweisungen zum Ausführen dieses Schritts zu erhalten.
  2. Backend Dark Mode aktivieren – diese Option befindet sich auf derselben Registerkarte wie die anderen wichtigen Einstellungen, über die wir zuvor gesprochen haben ( Allgemeine Einstellungen ). Sie müssen zu diesem Abschnitt navigieren und einen Schalter mit dem Titel Enable Backend Darkmode umlegen. Vergessen Sie nicht, nach unten zu scrollen und auf Einstellungen speichern zu klicken, um die Änderung zu übernehmen.
  3. Schalten Sie den Dunkelmodus in Ihrem Admin-Dashboard um – Ihr Admin-Dashboard hat jetzt oben einen Schalter, mit dem Sie den Dunkelmodus aktivieren können. Dies ist besonders nützlich für Websites mit mehreren Administratoren, da jede Person den Dunkelmodus unabhängig ein- oder ausschalten kann.
  4. (Optional) Passen Sie das Farbschema Ihres Admin-Dashboards an – bei aktiviertem Dunkelmodus möchten Sie vielleicht einige Farben umstellen, damit alles schöner aussieht. Navigieren Sie dazu zu Benutzer > Profil und wählen Sie die gewünschte Palette aus. Sobald Sie die Farben festgelegt haben, klicken Sie auf Profil aktualisieren , um die neuen Einstellungen zu übernehmen.

Und das ist alles, was dazu gehört. Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, den Dunkelmodus auf Ihrer WordPress-Seite sowie in Ihrem Admin-Dashboard zu implementieren.

Dieses Upgrade ist fast zu einfach, um es mit dem WP Dark Mode-Plugin zu ignorieren, daher empfehlen wir Ihnen, diese hervorragende Funktionalität zu Ihrer Website hinzuzufügen.

Biographie des Autors: Christopher ist Spezialist für digitales Marketing bei Digital Strategy One und freiberuflicher Blogger. Er konzentriert sich auf neue Web-Tech-Trends und die digitale Sprachverteilung über verschiedene Kanäle. In seiner Freizeit spielt Christopher Schlagzeug und Magic: the Gathering.