Dark-Mode auf der eigenen WordPress Webseite

In diesem Tutorial zeigen wir Ihnen, wie Sie ganz einfach einen Dark Mode auf Ihrer WordPress-Website hinzufügen können.

Dark Mode ist eine Funktion, die es Ihren Besuchern ermöglicht, ihre Website im Dunkelmodus anzusehen, um die Augen zu schonen und bei schlechten Lichtbedingungen eine angenehmere Nutzererfahrung zu bieten.

Es gibt mehrere Möglichkeiten, einen Dark Mode auf der eigenen WordPress-Website hinzuzufügen. In diesem Tutorial zeigen wir drei Methoden, darunter ein Plugin, ein benutzerdefiniertes CSS und ein JavaScript-Code.

Methode 1: Verwenden Sie ein Dark-Mode-Plugin

Das einfachste und schnellste Verfahren ist das Verwenden eines Dark-Mode-Plugins. Hier sind die Schritte, die Sie ausführen müssen:

1. Besuchen Sie das Plugin-Repository von WordPress und suchen Sie nach „Dark Mode“.
2. Installieren und aktivieren Sie ein Plugin Ihrer Wahl.
3. Gehen Sie zu den Einstellungen des Plugins und konfigurieren Sie es entsprechend Ihren Wünschen.

Methode 2: Verwenden Sie benutzerdefiniertes CSS

Wenn Sie nicht gerne Plugins verwenden, können Sie Dark Mode auch mit benutzerdefiniertem CSS hinzufügen. Hier sind die Schritte, die Sie ausführen müssen:

1. Gehen Sie zu Ihrem WordPress-Dashboard und wählen Sie „Design“ und dann „Editor“.
2. Wählen Sie Ihr aktuelles Theme aus der Liste der verfügbaren Themes aus.
3. Fügen Sie den folgenden Code am Ende Ihrer style.css-Datei hinzu:

body.dark-mode {
  background-color: #333;
  color: #fff;
}

Speichern Sie die Änderungen und überprüfen Sie Ihre Website, um sicherzustellen, dass der Dark Mode auch wirklich aktiviert ist und fehlerfrei funktioniert.

Methode 3: Verwenden Sie JavaScript-Code

Sie können Dark Mode auch mit JavaScript-Code hinzufügen. Hier sind die Schritte, die Sie dafür ausführen müssen:

Fügen Sie folgenden Code in Ihre functions.php-Datei ein:

function dark_mode_script() {
  ?>
  <script>
  function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
  }
  </script>
  <?php
}
add_action( 'wp_footer', 'dark_mode_script' );

Fügen Sie dann den folgenden Code z. B. in Ihre header.php-Datei ein:

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

Kombinieren Sie CSS und Javascript Code, speichern Sie die Änderungen und überprüfen Sie dann Ihre Website, um sicherzustellen, dass Dark Mode aktiviert ist.

Das war es auch schon! Mit diesen drei einfachen Methoden können Sie den Dark Mode auf Ihrer WordPress-Website einfach hinzufügen.

Wählen Sie die Methode, die am besten zu Ihnen passt, und denken Sie daran: immer Vorsicht walten lassen, stets vor jeder Änderung ein Backup anlegen und die erstellten Backups zusätzlich vor jedem Speichern auch immer prüfen.