Dark Mode: Editor dunkel anzeigen, Formular-Design behalten
Der Dark Mode ist eine dunkle Darstellung der Funnelforms-Editor-Oberfläche. Er entlastet die Augen in dunklen Arbeitsumgebungen und beeinflusst ausschließlich, wie der Editor bei dir aussieht – nicht das öffentlich ausgespielte Formular. Dieser Artikel zeigt, wie du den Dark Mode aktivierst, wie sich die Formular-Vorschau dabei verhält und wie du selbst ein dunkles Formular gestaltest.
Voraussetzungen
- Ein angemeldeter Funnelforms-Account – für diese Funktion sind keine besonderen Tarif-Voraussetzungen nötig.
- Ein moderner Browser. Die Auswahl wird lokal im Browser gespeichert und gilt pro Gerät und Browser-Profil.
Wo findest du den Dark-Mode-Schalter?
Der Toggle ist ein Sonne/Mond-Icon rechts oben in der Navigations-Leiste. Konkret findest du ihn an folgenden Stellen:
- Hauptbereich → Header (Sonne/Mond rechts oben).
- Formular-Editor → obere Werkzeugleiste – derselbe Toggle ist auch dort verfügbar.
- Admin-Bereich → Sidebar (sofern Admin-Rechte vorhanden).
Funktionen im Überblick
- Wechsel zwischen hellem und dunklem Editor-Theme per Klick.
- Auswahl bleibt pro Browser gespeichert – beim nächsten Login direkt aktiv.
- Wirkt auf alle Bereiche der App: Dashboard, Formular-Editor, Style-Editor, Analytics, Admin.
- Auth-Seiten (Login/Registrierung) sind absichtlich auf hell fixiert.
Schritt-für-Schritt: Dark Mode aktivieren
- Klicke auf das Sonne/Mond-Icon rechts oben im Header.
- Bei aktivem hellen Theme wechselt die Oberfläche sofort in die dunkle Variante.
- Ein weiterer Klick auf das Icon schaltet wieder ins helle Theme.
Wie verhält sich die Formular-Vorschau?
Im Style-Editor und im Formular-Editor siehst du rechts eine Live-Vorschau deines Formulars. Diese Vorschau ist von deinem Editor-Theme bewusst entkoppelt: Sie zeigt das Formular immer so, wie es deine Besucher sehen werden – also mit den Farben aus den Tabs Farben und Hintergründe.
Konkret bedeutet das:
- Aktivierst du den Dark Mode, wird der Rahmen um die Vorschau dunkel dargestellt (Hintergrund der Editor-Fläche, Toolbars, Geräte-Umschalter).
- Das Formular innerhalb der Vorschau-Karte behält die Style-Einstellungen: ein helles Formular bleibt hell, ein dunkles bleibt dunkel.
- Damit kannst du auch im Dark Mode jederzeit kontrollieren, wie dein Formular für Besucher aussieht.
Wie gestaltest du selbst ein dunkles Formular?
Wenn dein Formular für Besucher dunkel wirken soll, konfiguriere das im Style-Editor – nicht über den Editor-Dark-Mode:
- Öffne Style → Vorlagen und wähle das System-Theme Minimalist Dark als Ausgangspunkt.
- Verfeinere im Tab Farben die Text-, Hintergrund- und Button-Farben.
- Setze unter Hintergründe den Container- und Seitenhintergrund auf dunkle Werte.
- Speichere das Ergebnis optional als eigene Vorlage, um es auf weitere Formulare anzuwenden.
Best Practices
- Prüfe ein dunkles Formular zusätzlich im hellen Editor-Theme – so erkennst du Kontrast-Probleme schneller.
- Halte Text- und Hintergrund-Farben innerhalb gängiger Kontrast-Richtwerte (WCAG AA), damit das Formular auch für Besucher mit Sehschwäche lesbar bleibt.
- Setze die Geräte-Umschalter Desktop, Tablet, Mobile ein, um die Dark-Variante auf allen Größen zu prüfen.
Stolpersteine
- Dark Mode wirkt nicht auf das ausgespielte Formular: das ist Absicht. Wer Besuchern ein dunkles Formular zeigen will, ändert die Style-Einstellungen.
- Dark Mode springt zurück auf hell: die Einstellung wird lokal im Browser gespeichert. Inkognito-Fenster oder gelöschte Browser-Daten setzen den Modus zurück.
- Auth-Seiten bleiben hell: Login und Registrierung sind bewusst auf das helle Theme fixiert und ignorieren die persönliche Einstellung.
Hinweis: Die Dark-Mode-Einstellung gilt pro Browser, nicht serverseitig pro Account. Auf einem zweiten Gerät kannst du den Modus separat setzen.
Häufige Fragen
Sehen meine Besucher den Dark Mode?
Nein. Der Dark Mode betrifft ausschließlich deine Editor-Ansicht. Was Besucher sehen, bestimmen ausschließlich die Style-Einstellungen des Formulars.
Folgt der Dark Mode meinem System-Theme automatisch?
Nein. Funnelforms setzt das Theme nicht automatisch nach Betriebssystem-Präferenz, sondern erst durch deinen Klick auf das Sonne/Mond-Icon. Standard für neue Konten ist das helle Theme.
Warum sieht ein helles Formular im Dark Mode in der Vorschau seltsam aus?
Der dunkle Editor-Rahmen kontrastiert stark mit dem hellen Formular – das ist gewollt, damit du den tatsächlichen Look des Formulars siehst. Schalte für eine realistische Beurteilung den Dark Mode kurz aus oder nutze die Geräte-Umschalter.
Kann ich pro Formular festlegen, dass es dunkel ausgeliefert wird?
Ja, über die Style-Einstellungen des jeweiligen Formulars (Vorlagen, Farben, Hintergründe). Es gibt keinen separaten „Dark-Mode für Besucher"-Schalter – das Aussehen ergibt sich vollständig aus den Style-Werten.