Tutorial

Shopify Dawn Theme: Dark Mode ohne App hinzufügen [2025 Easy Guide]

Melden

Hier ist ein ausführliches Tutorial, wie du den Dark Mode (Nachtmodus) in das Shopify Dawn Theme integrierst – komplett ohne monatliche App-Gebühren und optimiert für das Jahr 2025.

Ein Dark Mode ist heute Standard für eine gute User Experience (UX). Er schont die Augen und spart bei OLED-Displays Akku. In dieser Anleitung zeige ich dir, wie du mit ein wenig CSS und JavaScript einen voll funktionsfähigen Dark-Mode-Switch erstellst, der sich die Einstellungen deiner Besucher merkt.

Inhaltsverzeichnis

  1. Vorbereitung (Backup erstellen)
  2. Schritt 1: Die Dark-Mode-Farben festlegen (CSS)
  3. Schritt 2: Den Toggle-Button erstellen (HTML)
  4. Schritt 3: Die Logik implementieren (JavaScript)
  5. Testen und Optimieren

Schritt 0: Vorbereitung

Bevor du Code änderst, erstelle immer ein Backup deines aktuellen Themes:

  • Gehe zu Onlineshop > Themes.
  • Klicke auf die drei Punkte neben dem Dawn Theme und wähle Duplizieren.

Schritt 1: Die CSS-Variablen anpassen

Das Dawn Theme basiert auf CSS-Variablen. Wir müssen definieren, was passiert, wenn die Klasse .dark-mode aktiv ist.

  1. Gehe zu Onlineshop > Themes > Anpassen > Code bearbeiten.
  2. Suche im Ordner Assets nach der Datei base.css.
  3. Scrolle ganz nach unten und füge folgenden Code ein:
/* Dark Mode Farben */
:root {
  --dark-bg: #121212;
  --dark-text: #f1f1f1;
  --dark-accent: #3d3d3d;
}

body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

/* Überschreiben der Shopify Dawn Variablen */
.dark-mode .gradient,
.dark-mode .page-width,
.dark-mode .header,
.dark-mode .footer,
.dark-mode .content-container {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode p, .dark-mode span, .dark-mode a {
  color: var(--dark-text) !important;
}

.dark-mode .button {
  background: var(--dark-text);
  color: var(--dark-bg);
}

/* Toggle Button Styling */
#dark-mode-toggle {
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
  display: flex;
  align-items: center;
}

#dark-mode-toggle svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

Schritt 2: Den Toggle-Button einbauen

Wir möchten den Schalter meistens im Header neben dem Warenkorb haben.

  1. Suche im Ordner Sections nach der Datei header.liquid.
  2. Suche nach dem Bereich, in dem die Icons (Suche, Account, Warenkorb) gerendert werden (suche nach header__icon).
  3. Füge diesen Code-Snippet an einer passenden Stelle ein (z. B. vor dem Warenkorb-Icon):
<button id="dark-mode-toggle" aria-label="Dark Mode umschalten">
  <span class="icon-sun">
    <svg viewBox="0 0 24 24" id="sun-icon"><path d="M12 7a5 5 0 100 10 5 5 0 000-10zM2 13h2a1 1 0 100-2H2a1 1 0 100 2zm18 0h2a1 1 0 100-2h-2a1 1 0 100 2zM11 2v2a1 1 0 100 2V2a1 1 0 100-2zm0 18v2a1 1 0 100 2v-2a1 1 0 100-2zM5.99 4.58a1 1 0 111.41 1.41L6.34 7.05a1 1 0 11-1.41-1.41l1.06-1.06zm12.02 12.02a1 1 0 111.41 1.41l-1.06 1.06a1 1 0 11-1.41-1.41l1.06-1.06zM5.99 19.42a1 1 0 11-1.41-1.41l1.06-1.06a1 1 0 111.41 1.41l-1.06 1.06zm12.02-12.02a1 1 0 11-1.41-1.41l1.06-1.06a1 1 0 111.41 1.41l-1.06-1.06z"></path></svg>
  </span>
</button>

Schritt 3: Die Logik (JavaScript)

Damit der Dark Mode funktioniert und die Auswahl auch beim Neuladen der Seite gespeichert bleibt (via localStorage), fügen wir ein Skript ein.

  1. Suche im Ordner Layout nach der Datei theme.liquid.
  2. Scrolle ganz nach unten und füge diesen Code direkt vor dem schließenden </body>-Tag ein:
<script>
  const darkModeToggle = document.getElementById('dark-mode-toggle');
  const body = document.body;

  // Prüfen, ob User Dark Mode bereits früher gewählt hat
  if (localStorage.getItem('theme') === 'dark') {
    body.classList.add('dark-mode');
  }

  darkModeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Speichern der Einstellung
    if (body.classList.contains('dark-mode')) {
      localStorage.setItem('theme', 'dark');
    } else {
      localStorage.setItem('theme', 'light');
    }
  });
</script>

Schritt 4: Verfeinerung für Dawn (Wichtig!)

Da das Dawn Theme viele spezifische Hintergründe (Gradients) nutzt, müssen wir sicherstellen, dass die Farbschemata von Shopify den Dark Mode nicht blockieren.

Gehe zurück in die base.css und stelle sicher, dass du auch die Inhaltsbereiche abdeckst:

.dark-mode .color-background-1, 
.dark-mode .color-background-2,
.dark-mode .color-accent-1,
.dark-mode .color-accent-2 {
  --gradient-background: var(--dark-bg) !important;
  background: var(--dark-bg) !important;
  --color-foreground: 241, 241, 241; /* RGB von #f1f1f1 */
}

Warum diese Methode im Jahr 2025 besser ist als Apps:

  1. Ladezeit: Keine zusätzlichen externen Scripte, die deinen Shop verlangsamen.
  2. Kosten: 100% kostenlos, für immer.
  3. SEO: Da keine Layout-Verschiebungen (Layout Shifts) durch nachladende Apps entstehen, bleibt dein Core Web Vitals Score besser.
  4. Kontrolle: Du kannst exakt bestimmen, welche Farben dein Dark Mode hat (z. B. ein edles Dunkelblau statt Schwarz).

Profi-Tipp:

Wenn du möchtest, dass sich der Shop automatisch dem System-Design des Nutzers (Windows/macOS/iOS) anpasst, füge diesen CSS-Block hinzu:

@media (prefers-color-scheme: dark) {
  body:not(.light-mode) { /* Optionale Logik */
    /* Automatischer Dark Mode Code */
  }
}

Fertig! Speichere alle Dateien und aktualisiere deinen Shop. Du solltest nun oben im Header die Sonne/den Button sehen, mit dem du das Design umschalten kannst.

0