Dunkelmodus zur WordPress-Website hinzufügen
Dunkelmodus zur WordPress-Website hinzufügen: Eine umfassende Anleitung
Der Dunkelmodus, auch bekannt als Dark Mode, ist eine beliebte Funktion, die das Erscheinungsbild einer Website oder Anwendung so anpasst, dass dunkle Farben anstelle von hellen Farben verwendet werden. Dies kann die Augenbelastung reduzieren, insbesondere bei schlechten Lichtverhältnissen, und den Akkuverbrauch auf Geräten mit OLED- oder AMOLED-Displays schonen. In diesem Artikel erfahren Sie, wie Sie einen Dunkelmodus zu Ihrer WordPress-Website hinzufügen können, sowohl mit Plugins als auch mit manuellen Code-Anpassungen.
Warum einen Dunkelmodus für Ihre WordPress-Website?
Die Implementierung eines Dunkelmodus bietet mehrere Vorteile:
- Verbesserte Benutzererfahrung: Viele Benutzer bevorzugen den Dunkelmodus, insbesondere bei schlechten Lichtverhältnissen oder nachts.
- Reduzierte Augenbelastung: Dunkle Farben können die Augenbelastung reduzieren und das Lesen angenehmer machen.
- Verlängerte Akkulaufzeit: Auf Geräten mit OLED- oder AMOLED-Displays kann der Dunkelmodus den Akkuverbrauch reduzieren.
- Modernes Design: Ein Dunkelmodus kann das Design Ihrer Website moderner und ansprechender gestalten.
Darüber hinaus kann die Bereitstellung eines Dunkelmodus Ihre Website benutzerfreundlicher und inklusiver machen.
Dunkelmodus mit WordPress-Plugins hinzufügen
Die einfachste Möglichkeit, einen Dunkelmodus zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung eines Plugins. Es gibt mehrere hervorragende Plugins, die diese Funktionalität bieten. Hier sind einige der beliebtesten Optionen:
1. WP Dark Mode
WP Dark Mode ist eines der beliebtesten Plugins für den Dunkelmodus in WordPress. Es ist einfach zu bedienen und bietet eine Vielzahl von Anpassungsoptionen. Zu den wichtigsten Funktionen gehören:
- Automatischer Dunkelmodus basierend auf dem Betriebssystem des Benutzers.
- Manuelle Umschaltung für den Dunkelmodus.
- Anpassbare Farben für den Dunkelmodus.
- Kompatibilität mit den meisten WordPress-Themes.
- Kostenlose und Premium-Version verfügbar.
Um WP Dark Mode zu installieren, suchen Sie im WordPress-Plugin-Verzeichnis danach, installieren Sie es und aktivieren Sie es. Konfigurieren Sie dann die Einstellungen nach Ihren Wünschen.
2. Dark Mode Switch
Dark Mode Switch ist ein weiteres beliebtes Plugin, das eine einfache Möglichkeit bietet, einen Dunkelmodus zu Ihrer Website hinzuzufügen. Es ist leichtgewichtig und einfach zu konfigurieren. Zu den wichtigsten Funktionen gehören:
- Einfache Installation und Konfiguration.
- Anpassbare Farben für den Dunkelmodus.
- Umschaltfläche für den Dunkelmodus.
- Kompatibilität mit den meisten WordPress-Themes.
- Kostenlos.
Dark Mode Switch ist eine gute Option für Benutzer, die eine einfache und unkomplizierte Lösung suchen.
3. Night Eye – Dark Mode as a Service
Night Eye ist ein etwas anderer Ansatz, da es sich um einen Cloud-basierten Dienst handelt, der einen Dunkelmodus zu jeder Website hinzufügen kann. Es bietet eine größere Flexibilität und Anpassungsmöglichkeiten als die meisten WordPress-Plugins. Zu den wichtigsten Funktionen gehören:
- Verschiedene Dunkelmodus-Filter.
- Anpassbare Farben und Helligkeit.
- Funktioniert mit allen Websites, nicht nur WordPress.
- Browser-Erweiterungen und Apps verfügbar.
- Kostenpflichtiger Dienst mit Testphase.
Night Eye ist eine gute Option, wenn Sie eine leistungsstarke und flexible Lösung für den Dunkelmodus suchen.
Dunkelmodus manuell mit Code hinzufügen
Wenn Sie mehr Kontrolle über das Erscheinungsbild des Dunkelmodus wünschen oder kein Plugin verwenden möchten, können Sie den Dunkelmodus manuell mit Code hinzufügen. Dies erfordert jedoch einige Kenntnisse in HTML, CSS und JavaScript.
1. CSS-Variablen definieren
Der erste Schritt besteht darin, CSS-Variablen für die Farben Ihres Hell- und Dunkelmodus zu definieren. Dies erleichtert das Ändern der Farben später. Fügen Sie den folgenden Code in Ihre style.css-Datei oder in den Customizer Ihres WordPress-Themes ein:
:root {
--bg-color: #ffffff; /* Hellmodus Hintergrund */
--text-color: #000000; /* Hellmodus Text */
--link-color: #007bff; /* Hellmodus Link */
}
[data-theme="dark"] {
--bg-color: #121212; /* Dunkelmodus Hintergrund */
--text-color: #ffffff; /* Dunkelmodus Text */
--link-color: #bb86fc; /* Dunkelmodus Link */
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
a {
color: var(--link-color);
}
2. JavaScript für den Umschalter
Als nächstes benötigen Sie JavaScript-Code, um zwischen Hell- und Dunkelmodus umzuschalten. Erstellen Sie eine script.js-Datei in Ihrem Theme-Verzeichnis und fügen Sie den folgenden Code hinzu:
document.addEventListener('DOMContentLoaded', function() {
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
});
Dieser Code prüft, ob der Benutzer bereits eine Präferenz für den Dunkelmodus gespeichert hat, und schaltet den Dunkelmodus entsprechend um. Wenn der Benutzer den Umschalter betätigt, wird der Dunkelmodus aktiviert oder deaktiviert und die Präferenz im Local Storage gespeichert.
3. HTML für den Umschalter
Fügen Sie nun den HTML-Code für den Umschalter in Ihre Website ein. Dies kann in Ihrem Theme-Header, Ihrer Sidebar oder einem anderen Bereich erfolgen. Fügen Sie den folgenden Code in Ihre header.php-Datei oder in einen Text-Widget ein:
Dunkelmodus
4. CSS für den Umschalter
Schließlich benötigen Sie CSS, um den Umschalter zu gestalten. Fügen Sie den folgenden Code in Ihre style.css-Datei ein:
.theme-switch-wrapper {
display: flex;
align-items: center;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: white;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
5. JavaScript-Datei einbinden
Vergessen Sie nicht, die script.js-Datei in Ihre WordPress-Website einzubinden. Dies kann in der functions.php-Datei Ihres Themes erfolgen:
function my_theme_scripts() {
wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
Nachdem Sie diese Schritte ausgeführt haben, sollte Ihre Website einen funktionierenden Dunkelmodus haben.
Design-Überlegungen für den Dunkelmodus
Bei der Gestaltung eines Dunkelmodus gibt es einige wichtige Überlegungen:
- Farbpalette: Wählen Sie Farben, die gut zusammenpassen und im Dunkelmodus gut lesbar sind. Vermeiden Sie zu helle oder grelle Farben, die die Augen belasten können.
- Kontrast: Stellen Sie sicher, dass genügend Kontrast zwischen Text und Hintergrund vorhanden ist, um die Lesbarkeit zu gewährleisten.
- Bilder und Videos: Passen Sie Bilder und Videos gegebenenfalls an, um sie im Dunkelmodus besser darzustellen.
- Benutzerfreundlichkeit: Stellen Sie sicher, dass der Dunkelmodus einfach zu aktivieren und deaktivieren ist.
Denken Sie daran, den Dunkelmodus auf verschiedenen Geräten und Browsern zu testen, um sicherzustellen, dass er ordnungsgemäß funktioniert und gut aussieht.
Fazit
Das Hinzufügen eines Dunkelmodus zu Ihrer WordPress-Website ist eine großartige Möglichkeit, die Benutzererfahrung zu verbessern, die Augenbelastung zu reduzieren und die Akkulaufzeit zu verlängern. Sie können dies entweder mit einem Plugin oder manuell mit Code tun. Die Wahl hängt von Ihren technischen Fähigkeiten und Ihren spezifischen Anforderungen ab. Unabhängig davon, für welche Methode Sie sich entscheiden, sollten Sie die Design-Überlegungen berücksichtigen, um sicherzustellen, dass der Dunkelmodus gut aussieht und gut funktioniert.
