Dark Mode für Contao aktivieren

Schritt‑für‑Schritt‑Anleitung für Contao

Der Dark Mode ist längst zu einem Standard moderner Webseiten geworden. Er bietet nicht nur eine angenehmere Lesbarkeit bei schwachem Licht, sondern spart auf Geräten mit OLED-Displays auch Energie. Im Content-Management-System Contao lässt sich eine Umschaltung zwischen hellem und dunklem Design mit überschaubarem Aufwand selbst programmieren.

Die Agentur Zentral GmbH unterstützt Webseitenbetreiber zudem bei der professionellen Umsetzung des Dark Mode in Contao.

Anfrage stellen

1. Vorbereitung: Template-Datei anlegen

Im ersten Schritt wird eine eigene Template-Datei j_dark_mode.html5 im Template-Ordner angelegt. Der folgende JavaScript-Code sorgt dafür, dass das Design je nach Einstellung umschaltet und die gewählte Option gespeichert bleibt:

<script>
const toggleSwitch = document.querySelector('.switch-dark-mode input[type="checkbox"]');

if (localStorage.theme) {
  toggleSwitch.checked = localStorage.theme === 'dark';
}

function switchTheme(e) {
  const theme = e.target.checked ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.theme = theme;
}

toggleSwitch.addEventListener('change', switchTheme);
</script>

Erklärung Zeile für Zeile

  • const toggleSwitch = ...
    Hier wird das Eingabeelement (Checkbox) innerhalb des Elements mit der Klasse .switch-dark-mode gesucht und in der Variablen toggleSwitch gespeichert.
  • if (localStorage.theme) { ... }
    Überprüft, ob im Browser-Speicher (localStorage) bereits ein Wert für das Thema vorhanden ist.
  • toggleSwitch.checked = localStorage.theme === 'dark';
    Setzt den Schalter (Checkbox) auf aktiv, falls das gespeicherte Thema „dark“ lautet. So wird beim erneuten Laden der Seite die letzte Einstellung beibehalten.
  • function switchTheme(e) { ... }
    Definiert eine Funktion, die beim Umschalten ausgeführt wird.
    • const theme = e.target.checked ? 'dark' : 'light';
      Liest den Zustand des Schalters aus: aktiviert = Dark Mode, deaktiviert = Light Mode.
    • document.documentElement.setAttribute('data-theme', theme);
      Setzt ein Attribut data-theme am <html>-Element, das im CSS genutzt werden kann.
    • localStorage.theme = theme;
      Speichert die Einstellung dauerhaft im Browser, damit sie beim nächsten Seitenbesuch erhalten bleibt.
  • toggleSwitch.addEventListener('change', switchTheme);
    Verknüpft den Schalter mit der Funktion switchTheme, sodass beim Umschalten sofort die Darstellung angepasst wird.

2. Modul in Contao anlegen

Anschließend wird im Backend ein neues Modul vom Typ Eigener HTML-Code erstellt. Dieses könnte beispielsweise den Namen Switch-Navigation für Dark Mode tragen. Als HTML wird folgender Code eingefügt:

<div class="switch-dark-mode">
  <label class="switch" for="darkSwitch">
    <input id="darkSwitch" type="checkbox">
    <span class="slider"></span>
  </label>
  <p>Dark Mode</p>
</div>

Dieser Code erzeugt einen Schieberegler (Toggle-Switch), der den Dark Mode aktiviert oder deaktiviert. Das Modul kann im Seitenlayout im Header-Bereich eingebunden werden.

3. Gestaltung mit CSS

Damit der Schalter optisch korrekt angezeigt wird, wird das folgende CSS hinzugefügt:

.switch-dark-mode {
  float: left;
  margin: 4px 0 -4px;
}
.switch-dark-mode p {
  float: right;
  font-size: 12px;
  font-size: 0.75rem;
  padding: 4px 7px;
}
.switch-dark-mode .switch {
  display: inline-block;
  height: 22px;
  position: relative;
  width: 42px;
}
.switch-dark-mode input {
  display: none;
}
.switch-dark-mode .slider {
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.switch-dark-mode .slider::before {
  bottom: 4px;
  content: "";
  height: 14px;
  left: 4px;
  position: absolute;
  width: 14px;
}
.switch-dark-mode input:checked + .slider::before,
[data-theme="dark"] .switch-dark-mode input + .slider::before {
  -webkit-transform: translateX(21px);
  -ms-transform: translateX(21px);
  transform: translateX(21px);
}

Erklärung des CSS

  • .switch-dark-mode – Positioniert den gesamten Schalterblock.
  • .switch-dark-mode p – Fügt die Beschriftung hinzu und definiert Schriftgröße und Abstände.
  • .switch-dark-mode .switch – Setzt die Größe und relative Position des Schalters.
  • .switch-dark-mode input – Blendet die eigentliche Checkbox aus, da stattdessen ein Slider-Element genutzt wird.
  • .switch-dark-mode .slider – Definiert den klickbaren Bereich des Reglers.
  • .switch-dark-mode .slider::before – Erstellt den kleinen Kreis (Toggle-Button), der verschoben wird.
  • input:checked + .slider::before – Verschiebt den Kreis nach rechts, wenn der Dark Mode aktiviert ist.

4. Automatische Erkennung der Systemeinstellungen

Damit sich die Webseite an den Systemeinstellungen orientiert, wird der JavaScript-Code um eine Erkennung erweitert:

<script>
const toggleSwitch = document.querySelector('.switch-dark-mode input[type="checkbox"]');

function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  toggleSwitch.checked = (theme === 'dark');
  localStorage.theme = theme;
}

if (localStorage.theme) {
  applyTheme(localStorage.theme);
} else {
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  applyTheme(prefersDark ? 'dark' : 'light');
}

toggleSwitch.addEventListener('change', e => {
  const theme = e.target.checked ? 'dark' : 'light';
  applyTheme(theme);
});
</script>

Damit wird bei erstmaligem Besuch automatisch die Systemeinstellung übernommen, solange noch keine eigene Auswahl getroffen wurde.

5. Vorteile des Dark Mode

  • Angenehmeres Lesen bei schlechten Lichtverhältnissen
  • Weniger Blendung durch helle Flächen
  • Energiesparend auf OLED-Displays
  • Moderner, flexibler Look für Webseiten
  • Benutzerfreundlichkeit durch freie Wahl zwischen hellem und dunklem Layout

Fazit

Der Dark Mode bietet sowohl gestalterische als auch praktische Vorteile für moderne Webseiten. Mit Contao lässt sich die Funktion über ein eigenes Template, ein Modul und etwas CSS unkompliziert umsetzen. Die Speicherung im Browser sorgt dafür, dass die gewählte Einstellung dauerhaft erhalten bleibt, während die automatische Erkennung der Systemeinstellungen zusätzlichen Komfort bietet. Wer die Integration nicht selbst programmieren möchte, kann die Umsetzung des Dark Mode von der Agentur Zentral GmbH professionell realisieren lassen.

Zurück zur Blog-Übersicht