Bitdoze-Logo

Carrd Dark Mode: So fügst du einen Theme-Umschalter hinzu (Guide 2026)

Füge deiner Carrd-Website einen Dark-Mode-Umschalter mit Copy-Paste-CSS und JS hinzu. Verhindert den weißen Blitz, folgt dem System-Theme und merkt sich die Nutzerwahl. Schritt-für-Schritt-Anleitung.

Dragos

Aktualisiert Veröffentlicht 53 Min. Lesezeit

Carrd Dark Mode Cover mit Theme-Umschalter

Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.

Dark Mode ist von einer Nischenvorliebe zur Mainstream-Erwartung geworden. Viele Besucher surfen nachts mit Handys, die bereits auf Dark Mode eingestellt sind, und eine strahlend weiße Website trifft sie wie eine Taschenlampe ins Gesicht.

Ein Carrd-Dark-Mode-Umschalter gibt Besuchern die Kontrolle über ihr Erlebnis. Sie wechseln zu der Variante, die ihren Augen besser tut, und die Seite merkt sich die Wahl für das nächste Mal. Diese Anleitung liefert Copy-Paste-CSS und JS, das außerdem den weißen Blitz beim Laden verhindert und dem System-Theme folgt, bis sich der Besucher entscheidet.

Carrd.co

Einige Carrd-Tutorials:

Die komplette Liste der Carrd-Plugins, -Themes und -Tutorials findest du auf meiner Website carrdme.com, inklusive eines fertigen Tabs-Widgets und eines Accordion-Widgets.

Warum Dark Mode auf deiner Carrd-Website

Fünf Gründe, je eine Zeile:

  1. Weniger Augenbelastung: dunkle Interfaces sind bei wenig Licht angenehmer.
  2. Akkueinsparung: auf OLED-Bildschirmen verbrauchen dunkle Pixel weniger Strom.
  3. Nutzerpräferenz: viele Menschen bevorzugen einfach eine dunkle UI. Die Option ist billiger Respekt.
  4. Lichtempfindlichkeit: manche Besucher brauchen dunklere Interfaces wirklich, für sie ist Dark Mode ein Barrierefreiheits-Feature.
  5. Moderne Erwartung: jede größere App liefert inzwischen ein Dark Theme.

Dark Mode ist keine Neuheit mehr. Besucher suchen den Schalter, und wenn er fehlt, springen sie zu einer Seite ab, die ihn hat.

Voraussetzungen: Du brauchst Carrd Pro Standard für Embeds

Das ganze Tutorial läuft über Carrds Embed-Element. Zwei Dinge klären das, bevor du irgendeinen Code einfügst.

  • Carrd-Pro-Standard-Account oder höher (Embeds gibt es nicht im Free- oder Pro-Lite-Plan)
  • Eine veröffentlichte Website oder eine, die bereit zum Veröffentlichen ist (Embeds rendern nicht im Builder)
  • Ungefähr 10 Minuten
  • Keine anderen Tools, kein Build-Schritt, keine externen Dateien

Embeds brauchen Carrd Pro Standard oder höher

Das Embed-Element erfordert Pro Standard oder höher. Pro Lite kostet 9 $/Jahr für 3 Websites und enthält keine Embeds. Pro Standard kostet 19 $/Jahr für 10 Websites (39 $/Jahr für 25 Websites) und fügt Embeds, Formulare, eigene Domains und Analytics hinzu. Pro Plus kostet 49 $/Jahr für 25 Websites mit erweiterten Einstellungen. Wenn du einfach nur mitmachen willst, starte die 7-tägige Pro-Testversion. Keine Kreditkarte. Preise im September 2026 auf carrd.co/pro geprüft; vor dem Kauf nochmal nachsehen.

Embeds erscheinen nicht im Builder

Carrds Doku sagt es klar: Das Embed-Element gibt im Builder nichts aus, du musst die Website also veröffentlichen, um es in Aktion zu sehen. Wenn dein Editor nach dem Einfügen des Codes unten leer aussieht, ist nichts kaputt. Veröffentlichen, dann testen.

Um ein Embed hinzuzufügen, klicke auf das +-Zeichen und wähle Embed. Auf einer vollen Seite kannst du auch das Elements Panel nutzen (More Actions → Elements…), das im August 2026 hinzukam, um Elemente zu finden und zu verwalten, ohne dich durchs Layout zu suchen.

Das ist dasselbe Custom-Code-Embed-Muster wie in der Anleitung zum Hinzufügen eines Cookie-Hinweises zu deiner Carrd-Website. Wenn du einmal ein Embed gemacht hast, sind die restlichen reine Copy-Paste-Jobs.

Wie Dark Mode auf Carrd funktioniert

Carrd hat keinen eingebauten Dark Mode. Ich habe die Doku und das Changelog im September 2026 nochmal geprüft: Es gibt immer noch kein Theme-Switch-Feature. Custom Code ist der einzige Weg.

Der Ansatz hier ist der Standard:

  1. Ein data-theme-Attribut auf dem Seiten-Root (light oder dark)
  2. CSS-Variablen für Farben, getauscht über [data-theme="dark"]
  3. Ein Toggle-Button, der das Attribut umkippt
  4. localStorage, damit die Wahl Reloads überlebt
  5. prefers-color-scheme als Standard, bevor der Besucher irgendwas wählt

Das Upgrade gegenüber einem naiven Snippet ist das Zwei-Embed-Muster. Embed Nr. 1 ist ein winziges Bootstrap in einem Hidden → Head-Embed, das data-theme setzt, bevor die Seite rendert. Embed Nr. 2 enthält die Toggle-UI und den Click-Handler (Inline oder Hidden → Body End).

Warum zwei Embeds?

Ein All-in-one-Inline-Embed wendet das Theme per JavaScript erst nach dem ersten Paint an. Nutzer mit dunklem System sehen bei jedem Laden einen weißen Blitz. Das Head-Bootstrap läuft vor dem Paint, der erste Frame hat also schon das richtige Theme.

Zwei Zeitachsen im Vergleich. Zeile A ist der Ein-Embed-Ansatz. Zeile B ist der Zwei-Embed-Ansatz aus dieser Anleitung:

A. Einzelnes Inline-EmbedRequestErster Paint(weiß)JS läuftDark aktiv(zu spät)Sichtbarer weißer Blitz für Dark-Mode-NutzerB. Zwei-Embed-Muster (Hidden → Head-Bootstrap)RequestHead-Skript setztdata-themeErster Paint(schon dunkel)Kein Blitz: Theme steht vor dem ersten Frame

Reihenfolge der Theme-Auflösung, höchste Priorität zuerst:

  1. Eine gespeicherte Wahl in localStorage unter dem Schlüssel theme (der Besucher hat irgendwann den Umschalter geklickt)
  2. Die OS-/Browser-Präferenz via prefers-color-scheme: dark
  3. Light Mode als harter Standard
localStorage(‘theme’) gesetzt?jaGespeicherte Wahl nutzenneinprefers-color-scheme:dark?jadarkneinlight

Größere Seiten sind kein Problem. Multi-Section-Websites, die mit Carrds Page-Element gebaut sind, behalten das Theme automatisch. Es ist alles ein Dokument, data-theme und localStorage bleiben also über Sektionen hinweg erhalten.

Head-Skripte laufen per Spezifikation vor dem Paint, der Fix ist also im Prinzip solide. Carrds genaue Injektionsreihenfolge ist trotzdem eine Bestätigung auf deiner eigenen veröffentlichten Website wert. Siehe die Test-Checkliste unten.

Dark Mode zu Carrd hinzufügen (Schritt für Schritt)

Zwei Embeds, dann eine von drei Toggle-Varianten wählen. Jeder Block unten ist zum Copy-Pasten.

Schritt 1: Ein Head-Embed hinzufügen, um den weißen Blitz zu verhindern

Klicke auf das +-Zeichen (oder More Actions → Elements…) und füge ein Embed-Element hinzu. Setze Type auf Code, Style auf Hidden und Location auf Head.

Embed: CodeStyleInlineHiddenLocationHeadBody TopBody EndStyle: Hidden mit Location: Head (der FOUC-Fix hängt davon ab)

Style: Hidden, Location: Head (nicht Inline)

Der Weißer-Blitz-Fix braucht ein Hidden-Embed, das auf den Head zielt. Eine reine Inline-Einrichtung macht es unmöglich, weil Inline-Code im Seiten-Body nach dem Paint rendert. Wir nutzen beide Styles: Hidden → Head für das Bootstrap, Inline (oder Hidden → Body End) für den Toggle.

Füge das in das Code-Feld ein:

html
<script>
(function () {
  var t;
  try { t = localStorage.getItem('theme'); } catch (e) {}
  if (!t) t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  document.documentElement.setAttribute('data-theme', t);
})();
</script>
<style>
  :root { color-scheme: light; }
  [data-theme="dark"] { color-scheme: dark; }
</style>

Was es tut:

  • Liest localStorage.theme innerhalb von try/catch, damit private Modi, die bei Storage-Zugriff werfen, die Seite nicht brechen
  • Fällt auf prefers-color-scheme: dark zurück, wenn der Besucher nie ein Theme gewählt hat
  • Setzt data-theme auf dem Dokument-Root vor dem ersten Paint
  • Gibt color-scheme: light|dark aus, damit native Formularcontrols, Scrollbars und Autofill dem Theme folgen (color-scheme wird in Chrome/Edge 81+, Firefox 96+, Safari 13+ unterstützt)

Carrd injiziert auf veröffentlichten Websites keinen color-scheme-Hinweis. Ich habe das rohe HTML einer veröffentlichten Beispielseite im September 2026 geprüft: nichts da. Das Snippet setzt es selbst. Geh nicht davon aus, dass die Plattform es für dich erledigt.

Verifizieren: veröffentlichen, die Seite in einem Inkognito-Fenster auf einem Rechner oder Handy mit Dark Mode öffnen. Die Seite sollte dunkel und ohne weißen Blitz kommen. Wenn du immer noch einen Blitz siehst, fehlt das Head-Embed, sitzt an der falschen Stelle, oder du siehst eine gecachte Seite (harte Aktualisierung).

Schritt 2: Das Dark-Mode-Toggle-Embed hinzufügen

Füge ein zweites Embed-Element hinzu. Setze Type auf Code. Für Style wähle Inline (damit du im Layout siehst, wo es sitzt) oder Hidden mit Location: Body End (der Toggle ist position: fixed, er landet also sowieso am selben Platz).

Carrd-Builder mit hinzugefügtem Embed-Element und Type auf Code gesetzt

Der Screenshot zeigt die Head-Location aus Schritt 1. Für dieses zweite Embed nimm Inline, oder behalte Hidden und wechsle die Location auf Body End.

Im Builder bleibt das Embed unsichtbar. Veröffentliche, um es zu sehen. Wähle dann eine der drei Toggle-Varianten unten und füge sie in dieses zweite Embed ein.

Der <style>-Block jeder Variante trägt die dunklen Farben und lädt mit diesem zweiten Embed im Body. Wenn du auf einer langsamen Verbindung trotzdem einen kurzen hellen Frame erwischst, schneide den <style>…</style>-Teil aus deiner gewählten Variante aus und füge ihn in das Head-Embed aus Schritt 1 ein, unter dem vorhandenen Code. Button und <script> bleiben hier.

Option 1: Schwebender Toggle-Button

Meine Standardwahl. Ein kleiner fixierter Button in der Ecke, funktioniert mit jedem Layout, bleibt aus dem Weg. Diese Version tauscht ein einzelnes Sonne/Mond-Emoji, hält aria-pressed synchron, scopet Transitions, damit der erste Paint sofort bleibt, respektiert prefers-reduced-motion, überlebt Private-Mode-Storage-Fehler, folgt Live-System-Theme-Wechseln und fügt einen View-Transition-Cross-Fade hinzu, wo der Browser es unterstützt.

html
<style>
  /* Light mode (default) colors */
  :root {
    --dm-bg-primary: #ffffff;
    --dm-bg-secondary: #f8fafc;
    --dm-text-primary: #1e293b;
    --dm-text-secondary: #64748b;
    --dm-border: #e2e8f0;
    --dm-accent: #3b82f6;
  }

  /* Dark mode colors */
  [data-theme="dark"] {
    --dm-bg-primary: #0f172a;
    --dm-bg-secondary: #1e293b;
    --dm-text-primary: #f1f5f9;
    --dm-text-secondary: #94a3b8;
    --dm-border: #334155;
    --dm-accent: #60a5fa;
  }

  /* Apply colors to Carrd elements */
  [data-theme="dark"] body,
  [data-theme="dark"] #wrapper,
  [data-theme="dark"] #main,
  [data-theme="dark"] section {
    background-color: var(--dm-bg-primary) !important;
  }

  [data-theme="dark"] h1,
  [data-theme="dark"] h2,
  [data-theme="dark"] h3,
  [data-theme="dark"] h4,
  [data-theme="dark"] p,
  [data-theme="dark"] span,
  [data-theme="dark"] li,
  [data-theme="dark"] a:not(.button) {
    color: var(--dm-text-primary) !important;
  }

  /* Style form inputs */
  [data-theme="dark"] input,
  [data-theme="dark"] textarea,
  [data-theme="dark"] select {
    background-color: var(--dm-bg-secondary) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
  }

  /* Smooth transitions, scoped so the first paint is instant */
  @media (prefers-reduced-motion: no-preference) {
    [data-theme-ready] body,
    [data-theme-ready] #wrapper,
    [data-theme-ready] #main,
    [data-theme-ready] section,
    [data-theme-ready] h1,
    [data-theme-ready] h2,
    [data-theme-ready] h3,
    [data-theme-ready] h4,
    [data-theme-ready] p,
    [data-theme-ready] span,
    [data-theme-ready] li,
    [data-theme-ready] a:not(.button),
    [data-theme-ready] input,
    [data-theme-ready] textarea {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
  }

  /* Toggle button */
  .theme-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 9999;
    background: var(--dm-bg-secondary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, background-color 0.3s;
  }

  .theme-toggle:hover {
    transform: scale(1.1);
  }

  .theme-toggle:focus-visible {
    outline: 2px solid var(--dm-accent);
    outline-offset: 2px;
  }
</style>

<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode" aria-pressed="false">
  <span aria-hidden="true">☀️</span>
</button>

<script>
(function () {
  var toggle = document.getElementById('themeToggle');

  function apply(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-theme-ready', '');
    toggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
    toggle.firstElementChild.textContent = theme === 'dark' ? '🌙' : '☀️';
  }

  function current() {
    return document.documentElement.getAttribute('data-theme') || 'light';
  }

  apply(current());

  toggle.addEventListener('click', function () {
    var next = current() === 'dark' ? 'light' : 'dark';
    try { localStorage.setItem('theme', next); } catch (e) {}
    if (document.startViewTransition) {
      document.startViewTransition(function () { apply(next); });
    } else {
      apply(next);
    }
  });

  window.matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', function (e) {
      var saved = null;
      try { saved = localStorage.getItem('theme'); } catch (err) {}
      if (!saved) apply(e.matches ? 'dark' : 'light');
    });
})();
</script>

Anmerkungen zu den beweglichen Teilen:

  • Transitions gelten erst, nachdem data-theme-ready auf dem Root gesetzt ist, das initiale Theme animiert also nicht ein.
  • document.startViewTransition ist Progressive Enhancement (Chrome/Edge 111+, Firefox 144+, Safari 18+). Nicht unterstützte Browser wechseln einfach sofort.
  • Der System-Change-Listener läuft nur, wenn der Besucher keine gespeicherte Wahl hat. Sobald er den Toggle klickt, gewinnt seine Wahl, bis er sie löscht.
  • Emojis rendern unter Windows und älterem Android unterschiedlich. Wenn du pixelkonsistente Icons willst, ersetze die ☀️-/🌙-Zeichen durch Inline-SVG-Sonnen- und -Mondformen.

Verifizieren: klicke den Toggle und die Farben sollten weich überblenden. Neu laden und das Theme sollte kleben (localStorage.theme hält light oder dark). Tabbe zum Button und du solltest den Fokusring sehen, mit aria-pressed, das in DevTools → Elements umkippt.

Option 2: Header-Toggle-Schalter

Eine Schalter-Pille, die du in die Nähe des Headers setzen kannst. Dieselben gemeinsamen Fixes wie Option 1: a:not(.button)-Textbehandlung, Transitions auf [data-theme-ready] gescoped, try/catch um Storage und ein System-Change-Listener.

Eine häufige Fußfalle in älteren Snippets dieses Musters: *, *::before, *::after { transition: … }. Das animiert die ganze Seite beim ersten Paint und bremst schwere Layouts aus. Die Regel unten ist absichtlich gescoped. Wenn deine ganze Seite beim Laden animiert, hast du die globale Transition-Regel behalten.

html
<style>
  /* Light mode colors */
  :root {
    --dm-bg: #ffffff;
    --dm-bg-alt: #f3f4f6;
    --dm-text: #111827;
    --dm-text-muted: #6b7280;
    --dm-border: #e5e7eb;
  }

  /* Dark mode colors */
  [data-theme="dark"] {
    --dm-bg: #111827;
    --dm-bg-alt: #1f2937;
    --dm-text: #f9fafb;
    --dm-text-muted: #9ca3af;
    --dm-border: #374151;
  }

  /* Apply to page */
  [data-theme="dark"] body,
  [data-theme="dark"] #wrapper,
  [data-theme="dark"] #main,
  [data-theme="dark"] section {
    background-color: var(--dm-bg) !important;
  }

  [data-theme="dark"] h1,
  [data-theme="dark"] h2,
  [data-theme="dark"] h3,
  [data-theme="dark"] h4,
  [data-theme="dark"] p,
  [data-theme="dark"] span,
  [data-theme="dark"] li,
  [data-theme="dark"] a:not(.button) {
    color: var(--dm-text) !important;
  }

  [data-theme="dark"] input,
  [data-theme="dark"] textarea {
    background-color: var(--dm-bg-alt) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
  }

  /* Transitions scoped to post-load state */
  @media (prefers-reduced-motion: no-preference) {
    [data-theme-ready] body,
    [data-theme-ready] #wrapper,
    [data-theme-ready] #main,
    [data-theme-ready] section,
    [data-theme-ready] h1,
    [data-theme-ready] h2,
    [data-theme-ready] h3,
    [data-theme-ready] h4,
    [data-theme-ready] p,
    [data-theme-ready] span,
    [data-theme-ready] li,
    [data-theme-ready] a:not(.button),
    [data-theme-ready] input,
    [data-theme-ready] textarea {
      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
  }

  /* Toggle switch container */
  .switch-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    background: var(--dm-bg-alt);
    padding: 8px 15px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .switch-label {
    font-size: 18px;
  }

  .switch {
    position: relative;
    width: 56px;
    height: 28px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .switch input:focus-visible + .switch-slider {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  .switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    border-radius: 28px;
    transition: 0.3s;
  }

  .switch-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  input:checked + .switch-slider {
    background-color: #3b82f6;
  }

  input:checked + .switch-slider:before {
    transform: translateX(28px);
  }
</style>

<div class="switch-container">
  <span class="switch-label" aria-hidden="true">☀️</span>
  <label class="switch">
    <input type="checkbox" id="themeSwitch" role="switch" aria-label="Toggle dark mode">
    <span class="switch-slider"></span>
  </label>
  <span class="switch-label" aria-hidden="true">🌙</span>
</div>

<script>
(function () {
  var themeSwitch = document.getElementById('themeSwitch');

  function apply(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-theme-ready', '');
    themeSwitch.checked = (theme === 'dark');
    themeSwitch.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
  }

  function current() {
    return document.documentElement.getAttribute('data-theme') || 'light';
  }

  apply(current());

  themeSwitch.addEventListener('change', function () {
    var next = themeSwitch.checked ? 'dark' : 'light';
    try { localStorage.setItem('theme', next); } catch (e) {}
    apply(next);
  });

  window.matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', function (e) {
      var saved = null;
      try { saved = localStorage.getItem('theme'); } catch (err) {}
      if (!saved) apply(e.matches ? 'dark' : 'light');
    });
})();
</script>

Die versteckte Checkbox bekommt role="switch" und aria-label="Toggle dark mode", mit synchron gehaltenem aria-checked. Ohne das Label hat sie keinen zugänglichen Namen.

Option 3: Minimaler Icon-Toggle

Ein kleiner umrandeter Kreis, der Sonne und Mond tauscht. Leichtere Paletten-Variablen, falls du die Benennung bevorzugst. Dieselben gemeinsamen Fixes wie die anderen beiden.

html
<style>
  /* Theme colors */
  :root {
    --page-bg: #ffffff;
    --page-bg-alt: #f9fafb;
    --page-text: #18181b;
    --page-text-muted: #71717a;
  }

  [data-theme="dark"] {
    --page-bg: #18181b;
    --page-bg-alt: #27272a;
    --page-text: #fafafa;
    --page-text-muted: #a1a1aa;
  }

  [data-theme="dark"] body,
  [data-theme="dark"] #wrapper,
  [data-theme="dark"] #main,
  [data-theme="dark"] section {
    background-color: var(--page-bg) !important;
  }

  [data-theme="dark"] h1,
  [data-theme="dark"] h2,
  [data-theme="dark"] h3,
  [data-theme="dark"] h4,
  [data-theme="dark"] p,
  [data-theme="dark"] span,
  [data-theme="dark"] li,
  [data-theme="dark"] a:not(.button) {
    color: var(--page-text) !important;
  }

  [data-theme="dark"] input,
  [data-theme="dark"] textarea {
    background-color: var(--page-bg-alt) !important;
    color: var(--page-text) !important;
    border-color: var(--page-text-muted) !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-theme-ready] body,
    [data-theme-ready] #wrapper,
    [data-theme-ready] #main,
    [data-theme-ready] section,
    [data-theme-ready] h1,
    [data-theme-ready] h2,
    [data-theme-ready] h3,
    [data-theme-ready] h4,
    [data-theme-ready] p,
    [data-theme-ready] span,
    [data-theme-ready] li,
    [data-theme-ready] a:not(.button),
    [data-theme-ready] input,
    [data-theme-ready] textarea {
      transition: background-color 0.25s ease, color 0.25s ease;
    }
  }

  /* Minimal toggle */
  .minimal-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 2px solid var(--page-text);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 9999;
    transition: transform 0.3s, background-color 0.3s;
  }

  .minimal-toggle:hover {
    background: var(--page-bg-alt);
    transform: rotate(20deg);
  }

  .minimal-toggle:focus-visible {
    outline: 2px solid var(--page-text-muted);
    outline-offset: 2px;
  }

  .minimal-toggle .sun-icon {
    display: block;
  }

  .minimal-toggle .moon-icon {
    display: none;
  }

  [data-theme="dark"] .minimal-toggle .sun-icon {
    display: none;
  }

  [data-theme="dark"] .minimal-toggle .moon-icon {
    display: block;
  }
</style>

<button class="minimal-toggle" id="minimalToggle" aria-label="Toggle dark mode" aria-pressed="false">
  <span class="sun-icon" aria-hidden="true">☀️</span>
  <span class="moon-icon" aria-hidden="true">🌙</span>
</button>

<script>
(function () {
  var minimalToggle = document.getElementById('minimalToggle');

  function apply(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    document.documentElement.setAttribute('data-theme-ready', '');
    minimalToggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
  }

  function current() {
    return document.documentElement.getAttribute('data-theme') || 'light';
  }

  apply(current());

  minimalToggle.addEventListener('click', function () {
    var next = current() === 'dark' ? 'light' : 'dark';
    try { localStorage.setItem('theme', next); } catch (e) {}
    if (document.startViewTransition) {
      document.startViewTransition(function () { apply(next); });
    } else {
      apply(next);
    }
  });

  window.matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', function (e) {
      var saved = null;
      try { saved = localStorage.getItem('theme'); } catch (err) {}
      if (!saved) apply(e.matches ? 'dark' : 'light');
    });
})();
</script>

Verifizieren (alle drei Optionen): Keyboard-Tab sollte auf dem Toggle landen, mit sichtbarem Fokusring. Das ist der Teil, den die meisten Snippets überspringen, und der Teil, der das Control ohne Maus benutzbar macht.

Deine Carrd-Dark-Mode-Farben anpassen

Die CSS-Variablen oben in Option 1 (und das --page-*-Set in Option 3) sind die einzigen Farben, die du anfassen musst.

CSS-Variablen (in dieser Anleitung)

Zwei Blöcke. Light-Werte in :root, Dark-Werte in [data-theme="dark"]:

css
:root {
  --dm-bg-primary: #ffffff;     /* Main background */
  --dm-bg-secondary: #f8fafc;   /* Secondary background (cards, inputs) */
  --dm-text-primary: #1e293b;   /* Main text color */
  --dm-text-secondary: #64748b; /* Muted text */
  --dm-border: #e2e8f0;         /* Border color */
  --dm-accent: #3b82f6;         /* Accent/link color */
}

[data-theme="dark"] {
  --dm-bg-primary: #0f172a;     /* Dark background */
  --dm-bg-secondary: #1e293b;   /* Slightly lighter dark */
  --dm-text-primary: #f1f5f9;   /* Light text */
  --dm-text-secondary: #94a3b8; /* Muted light text */
  --dm-border: #334155;         /* Dark border */
  --dm-accent: #60a5fa;         /* Lighter accent for contrast */
}

Es funktioniert überall und gibt dir volle Kontrolle über jedes Theme. Der Rest der Anleitung geht von diesem Setup aus.

light-dark()-Alternative

Definiere jede Farbe einmal und lass color-scheme den Gewinner wählen:

css
:root {
  --dm-bg-primary: light-dark(#ffffff, #0f172a);
  --dm-bg-secondary: light-dark(#f8fafc, #1e293b);
  --dm-text-primary: light-dark(#1e293b, #f1f5f9);
  --dm-accent: light-dark(#3b82f6, #60a5fa);
}

Weniger CSS, aber nur in neueren Browsern. Der Toggle muss trotzdem color-scheme umkippen (Schritt 1 setzt es bereits). Nutze das, wenn dir älteres Safari egal ist.

light-dark()-Browser-Support

Chrome 123+, Firefox 120+, Safari 17.5+ (Baseline 2024, geprüft September 2026). Jetzt gut nutzbar, da Schritt 1 color-scheme setzt. Behalte die CSS-Variablen-Version, wenn du älteres Safari brauchst.

Für mehr Copy-Paste-CSS-Anpassung auf Carrd siehe die custom Carrd-Countdown-Timer-Designs.

Dark-Mode-Design-Tipps

Kontrast testen. Text muss auf dem dunklen Hintergrund lesbar bleiben. Lass die Palette im Zweifel durch einen Kontrast-Checker laufen.

Nicht rein schwarz gehen. #000000 ist hart. Nutze stattdessen dunkle Grautöne wie #0f172a oder #1e293b.

Deine Akzentfarbe aufhellen. Farben, die auf Weiß funktionieren, wirken auf Dunkel oft matschig. #3b82f6 wird in der Palette oben genau deshalb zu #60a5fa.

Jede Sektion prüfen. Geh die ganze Seite in beiden Themes durch. Manche Elemente brauchen extra Selektoren (nächster Abschnitt).

An Bilder denken. Logos und Grafiken, die für weiße Hintergründe designed wurden, brauchen eventuell eine zweite Version, einen Filter oder einen dezenten Rahmen.

Umgang mit Carrd-spezifischen Elementen und Bildern

Carrd generiert stabile strukturelle Selektoren: #wrapper, #main und .inner sind auf veröffentlichten Websites vorhanden (im rohen HTML eines veröffentlichten Beispiels im September 2026 verifiziert). Template-spezifische Klassennamen variieren, störrische Elemente brauchen also extra Targeting.

css
/* Target specific Carrd elements */
[data-theme="dark"] .inner,
[data-theme="dark"] .container,
[data-theme="dark"] [class*="style1"],
[data-theme="dark"] [class*="style2"] {
  background-color: var(--dm-bg-primary) !important;
  color: var(--dm-text-primary) !important;
}

/* Target Carrd buttons (ul.buttons > li > a.button); a:not(.button) above only covers text links */
[data-theme="dark"] .buttons .button {
  background-color: var(--dm-accent) !important;
}

/* Target Carrd icons (ul.icons > li > a > svg) */
[data-theme="dark"] .icons svg {
  filter: brightness(0) invert(1);
}

Template-Varianz

Die style1…style5-Klassennamen unterscheiden sich je nach Template, und Tricks wie [data-theme="dark"] .inner > * { background: transparent !important } können auf manchen Templates Button- und Card-Hintergründe auslöschen. Teste auf deinem. Wenn Buttons im Dark Mode ihren Hintergrund verlieren, entferne zuerst diese Regel. Nichts davon ist universell. Verifiziere jedes Override auf deiner veröffentlichten Seite.

Hintergrundbilder reagieren nicht auf background-color-Overrides. Wenn eine Sektion sich weigert dunkler zu werden, ist wahrscheinlich ein Hintergrundbild der Übeltäter. Tausche es aus oder dimme es mit einem Overlay:

css
[data-theme="dark"] img {
  opacity: 0.9;
  filter: brightness(0.95);
}

/* Or give images a subtle frame */
[data-theme="dark"] img {
  border: 1px solid var(--dm-border);
  border-radius: 8px;
}

Wenn du einen Sticky Header betreibst, rechne mit einem Konflikt: eine noch helle Header-Leiste auf einer ansonsten dunklen Seite. Die Sticky-Header-für-Carrd-Anleitung zeigt, welche Selektoren du ansteuern musst, damit die Leiste mit dem Rest dunkler wird.

Den Toggle-Button positionieren

Ändere die Position, indem du diese CSS-Properties auf deiner Toggle-Klasse bearbeitest:

Unten links (Standard in Option 1):

css
bottom: 25px;
left: 25px;

Oben rechts:

css
top: 25px;
right: 25px;

Unten rechts:

css
bottom: 25px;
right: 25px;

Zum z-index: Die Snippets nutzen z-index: 9999, damit der Toggle über dem Inhalt schwebt. Das kann mit Carrds Mobile-Menü-Button und den Social Icons kollidieren. Wenn der Toggle etwas Tippbares verdeckt, senke den z-index oder bewege den Button in die gegenüberliegende Ecke. Dasselbe gilt, wenn du außerdem ein fixiertes Zurück-nach-oben-Control betreibst. Schau in unsere Anleitung zum Hinzufügen eines Zurück-nach-oben-Buttons in Carrd und verhindere, dass sich beide in einer Ecke stapeln. Prüfe speziell in mobilen Layouts doppelt, dass nichts unter dem Toggle sitzt, nachdem du eine mobile responsive Navbar in Carrd erstellt hast.

Deinen Carrd-Dark-Mode-Umschalter testen und troubleshooten

Embeds rendern nichts im Builder, jede Prüfung unten passiert also auf der veröffentlichten Website.

  • Veröffentlichen, dann die Seite in einem Inkognito-Fenster auf einem auf Dark eingestellten System öffnen: Theme wird ohne weißen Blitz angewendet
  • Toggle klicken, neu laden: die Wahl bleibt in localStorage (Schlüssel theme)
  • DevTools-Konsole ist sauber (kein Uncaught SecurityError von localStorage im privaten Modus)
  • Keyboard-Tab erreicht den Toggle und der Fokusring ist sichtbar
  • aria-pressed (oder aria-checked bei Option 2) kippt im Elements-Panel um, wenn du toggelst
  • Ohne gespeicherte Wahl das OS-Theme live wechseln: die Seite folgt

Wenn sich etwas daneben benimmt:

Der weiße Blitz erscheint trotzdem

Das Head-Bootstrap fehlt, ist auf die falsche Location gesetzt (es muss Style: Hidden, Location: Head sein), oder du siehst eine gecachte Kopie. Bestätige, dass das Embed mit dem richtigen Style und der richtigen Location existiert, dann hart aktualisieren oder in einem privaten Fenster testen. Verifiziere außerdem einmal auf deiner eigenen veröffentlichten Website, dass der Head-Code vor dem Paint läuft. Carrds Injektionsreihenfolge ist einen einzigen End-to-End-Check wert, weil der Builder es dir nicht zeigt. Wenn das Head-Embed stimmt und ein kurzer Blitz bleibt, verschiebe auch den <style>-Block des Toggles in das Head-Embed (siehe Schritt 2).

Toggle klickt, aber nichts ändert sich

Drei übliche Verdächtige: ein Script-Fehler in der Konsole (füge den ganzen Codeblock nochmal ein, ungeschlossene Tags sind die häufige Ursache), die Dark-CSS-Selektoren treffen dein Template nicht, oder die Website wurde nach deiner Bearbeitung nicht wirklich veröffentlicht. Prüfe zuerst die Konsole, dann inspiziere das <html>-Element. data-theme sollte beim Klicken umkippen.

Buttons oder Cards haben im Dark Mode ihren Hintergrund verloren

Das ist die [data-theme="dark"] .inner > * { background: transparent !important }-Regel, die zubeißt. Sie ist template-abhängig und oft zu aggressiv. Entferne sie und gib .button und Card-Containern stattdessen eigene Hintergrund-Overrides.

Toggle verdeckt das Mobile-Menü oder Social Icons

z-index: 9999 plus eine Eckposition überlappt Carrds Chrome auf kleinen Bildschirmen. Senke den z-index oder positioniere den Toggle in eine freie Ecke (siehe den Positionierungs-Abschnitt). Teste auf Handy-Breite, nicht nur Desktop.

Manche Sektionen ändern nie ihre Farbe

Entweder nutzt das Template styleN-Klassen, die deine Selektoren verfehlen, oder der Sektionshintergrund ist ein Bild. Inspiziere das Element, füge seine Klasse dem Dark-CSS-Block hinzu und tausche oder dimme Hintergrundbilder. Inline-SVG-Icons ignorieren Farb-Overrides ebenfalls. Färbe sie mit fill/stroke-Regeln oder einem filter um.

Präferenz speichert nicht oder Uncaught SecurityError in der Konsole

Private Browsing-Modi können localStorage blockieren. Der Code umwickelt jeden Lese-/Schreibzugriff mit try/catch, der Toggle funktioniert also weiter für die Session. Er kann sich die Wahl nur nicht merken. Nichts zu fixen; es degradiert absichtlich.

Rollback

Nichts außerhalb der beiden Embeds wird verändert. Lösche beide Embed-Elemente und veröffentliche: die Website ist wieder im Originalzustand. Um die klemmende Präferenz eines einzelnen Besuchers zu löschen, öffne DevTools → Application → Local Storage und entferne den theme-Schlüssel.

FAQ: Carrd-Dark-Mode-Fragen

Hat Carrd einen eingebauten Dark Mode?

Nein. Stand September 2026 gibt es kein Theme-Switch-Feature in Carrd. Ich habe die Doku und das Changelog geprüft. Ein Custom-Code-Embed ist der Weg, und diese Anleitung ist der Copy-Paste-Pfad.

Warum blitzt meine Carrd-Website weiß auf, bevor der Dark Mode lädt?

Das ist FOUC (flash of unstyled content), in diesem Fall ein Blitz des falschen Themes. Ein All-in-one-Inline-Embed wendet den Dark Mode per JavaScript erst nach dem ersten Paint an, Dark-Mode-Nutzer sehen also zuerst Weiß. Das Hidden → Head-Bootstrap aus Schritt 1 setzt data-theme vor dem Paint und entfernt den Blitz.

Welchen Carrd-Plan brauche ich für Dark Mode?

Pro Standard (19 $/Jahr für 10 Websites) oder höher, weil Embeds der Auslieferungsmechanismus sind. Pro Lite (9 $/Jahr) hat gar keine Embeds. Pro Plus (49 $/Jahr) lohnt sich nur, wenn du die erweiterten Einstellungen brauchst. Carrd hat eine 7-tägige kostenlose Pro-Testversion ohne Kreditkarte, falls du das nur einmal bauen willst. Preise von September 2026; auf carrd.co/pro nachprüfen.

Funktioniert der Dark-Mode-Toggle auf einer Multi-Section-Carrd-Website?

Ja. Sektionen, die mit Carrds Page-Element gebaut sind, teilen sich ein Dokument, data-theme und localStorage bleiben also erhalten, während Besucher sich bewegen. Ein einziger Carrd-Dark-Mode-Theme-Umschalter deckt die ganze Website ab. Wenn du außerdem eine schwebende Aktion aus derselben Familie fixierter Buttons willst, füge einen WhatsApp-Chat-Button zu Carrd hinzu.

Carrd.co

Fazit

Dark Mode wird inzwischen erwartet, besonders von Besuchern, die nachts surfen. Das komplette Setup ist zwei Embeds und ein Toggle-Snippet. Grob 10 Minuten, wenn du sorgfältig einfügst. Starte mit Option 1 (dem schwebenden Button), wenn du unsicher bist, welcher Stil passt. Er funktioniert mit jedem Layout und bleibt aus dem Weg.

Ein paar nächste Schritte, sobald der Toggle live ist:

#Carrd#CSS#Dark Mode

Ähnliche Artikel

Hat diese Anleitung bei dir funktioniert?

Dragos

Geschrieben von Dragos

Dragos is the author of Bitdoze — practical DevOps, programming, and self-hosting guides.

Mehr Anleitungen von Dragos →

Brauchst du Hilfe bei Astro, VPS oder einer Self-hosted-App? Services ansehen →