Nachschlagewerk für Aufwandseinschätzung, Angebotsformulierung und technische Umsetzung. Dark Mode ist kein Schalter — es ist eine zweite, dauerhaft zu pflegende Designebene.
Demo
01
Aufwand nach Website-Typ
Der Aufwand skaliert nicht linear mit der Seitenzahl, sondern mit der Anzahl unterschiedlicher Komponenten und Zustände. Eine kleine Seite mit komplexem Konfigurator kann teurer sein als eine große, durchgängig systematisierte Seite.
Klein
4–10 h / einfach
Landingpage / Visitenkarte
Wenige Komponenten, kaum Zustände
Keine Formulare oder nur Kontaktformular
Wenn Design-Token vorhanden: oberes Ende eher 4 h
Mittel
15–40 h / moderat
Unternehmensseite, Blog, kleiner Shop
Mehrere Templates & wiederkehrende Module
Formulare, Karten, Hover-/Aktiv-Zustände
Bilder/SVGs müssen teils angepasst werden
Groß
60 h+ / komplex
Shop, Portal, Web-App, viele Templates
Komplexe Zustände, Datentabellen, Charts
Drittanbieter-Widgets, eingebettete Inhalte
QA über alle Breakpoints & Browser
Faustregel Skalierung
Bestehende Seite ohne Design-System nachrüsten ist meist 2–3× teurer als Dark Mode von Anfang an mitzudenken. Der größte Kostentreiber sind hartcodierte Farben (Hex-Werte direkt im CSS/Inline statt CSS-Variablen).
02
Was ist alles betroffen
Dark Mode ist nicht „Hintergrund schwarz, Schrift weiß". Jede dieser Ebenen braucht eine eigene, bewusste Entscheidung — sonst entstehen unleserliche oder „ausgewaschene" Stellen.
Hintergründe
Mehrere Ebenen: Seite, Sektion, Karte, Erhöhung (elevation). Nicht reines Schwarz — gestaffelte Graustufen.
Helle Produktfotos/Diagramme können stören; ggf. leichte Abdunklung oder Rahmen.
Charts & Datenviz
Achsen, Gitterlinien, Datenfarben, Legenden — komplett neu durchdeklinieren.
Code / Syntax-Highlighting
Falls vorhanden: eigenes dunkles Theme nötig.
Drittanbieter-Embeds
Maps, YouTube, Cookie-Banner, Chat-Widgets, reCAPTCHA — oft nicht/schwer anpassbar.
Akzent-/Brandfarben
Markenfarben brauchen oft eine zweite Variante, weil sie auf Dunkel grell wirken.
Toggle & Persistenz
Umschalter, Speicherung der Präferenz, System-Einstellung respektieren, Flash-of-wrong-theme vermeiden.
03
Was ich dem Kunden sagen kann
Die zentrale Botschaft: Dark Mode ist eine zweite, vollständige Designebene — keine einmalige Anpassung. Verständliche Formulierungen für das Kundengespräch:
„Dark Mode bedeutet, dass praktisch jedes Element der Website ein zweites Mal gestaltet werden muss — wir verdoppeln nicht die Inhalte, aber die Design-Entscheidungen."
„Es ist keine einmalige Anpassung: Jede zukünftige neue Seite, jedes neue Modul und jede Erweiterung muss ab dann in beiden Varianten mitgedacht und getestet werden."
„Eingebundene Fremd-Werkzeuge (z. B. Cookie-Banner, Karten, Buchungssysteme, Chat) lassen sich oft nur eingeschränkt oder gar nicht in den Dark Mode bringen — hier kann es sichtbare Brüche geben."
„Der Mehrwert ist real (Augenkomfort, moderne Wirkung, Akku auf OLED), aber er rechtfertigt sich vor allem, wenn die Zielgruppe es aktiv nutzt — wir sollten prüfen, ob das hier der Fall ist."
„Wir empfehlen, vor der Umsetzung eine kurze Machbarkeitsprüfung zu machen, damit Aufwand und Grenzen realistisch eingeschätzt sind."
Klar benennen
Dark Mode erhöht dauerhaft die Wartungs- und Erweiterungskosten der Seite. Das gehört offen ins Gespräch — nicht erst, wenn die nächste Rechnung höher ausfällt.
04
Aufwandsschätzung
Schätzung nach Arbeitspaketen. Bandbreiten je nach Vorzustand (Design-Token vorhanden? Hartcodierte Farben?).
Arbeitspaket
Klein
Mittel
Groß
Analyse / Machbarkeitsprüfung
1–2 h
2–4 h
4–8 h
Farbsystem / Token aufsetzen
1–3 h
4–8 h
8–16 h
Komponenten umsetzen
2–4 h
6–16 h
25 h+
Bilder / SVG / Icons
0–1 h
2–5 h
6–12 h
Toggle + Persistenz + System-Pref
1–2 h
2–3 h
3–5 h
QA / Browser / Breakpoints
1–2 h
3–6 h
10 h+
Summe (Richtwert)
~4–10 h
~15–40 h
~60 h+
Puffer einplanen
Auf Bestandsseiten ohne sauberes Token-System realistisch +20–40 % Puffer für Sonderfälle, die erst beim Durchklicken auffallen.
05
Anmerkungen & Prinzipien
Nicht pauschal anbieten. Dark Mode hängt zu stark vom Ist-Zustand der Codebasis ab, als dass ein Festpreis ohne Sichtung seriös wäre.
Immer Machbarkeitsprüfung zuerst. Kurzes Audit: Sind Farben über Variablen zentralisiert? Wie viele Fremd-Komponenten? Wie viele Templates/Zustände?
Bestand vs. Neubau unterscheiden. Bei Neuprojekten Dark Mode von Beginn an als Architekturentscheidung — viel günstiger als nachrüsten.
Grenzen vorab kommunizieren. Drittanbieter-Embeds und eingebettete Inhalte können visuelle Brüche verursachen, die nicht in unserer Hand liegen.
Bedarf hinterfragen. Will die Zielgruppe das wirklich, oder ist es ein „nice to have"? Ehrliche Empfehlung statt Mitnahmeeffekt.
Wartung als Dauerthema benennen. Jede künftige Änderung wird etwas teurer — das gehört von Anfang an auf den Tisch.
06
Technische Empfehlung
Single source of truth über CSS Custom Properties. Farben nie hartcodieren, sondern ausschließlich über semantische Tokens referenzieren. Das macht Light/Dark zu einem reinen Variablen-Tausch statt einem zweiten Stylesheet.
System-Präferenz via prefers-color-scheme als Default, manuellen Toggle als Override darüberlegen.
FOUC vermeiden: Theme vor dem ersten Paint per kleinem Inline-Skript im <head> setzen (liest gespeicherte Präferenz).
SVG/Icons: Inline einbinden und mit currentColor arbeiten — passen sich dann automatisch an.
Schatten ersetzen: Auf Dunkel mit Borders/Elevation-Tokens statt klassischer Box-Shadows arbeiten.
Bilder:<picture> mit media="(prefers-color-scheme: dark)" für echte Dark-Varianten von Logos/Diagrammen.
Persistenz: Auswahl in localStorage bzw. Cookie (bei SSR) speichern.
Stack-Hinweis
Bei Vue/Nuxt: Theme-State zentral (z. B. Pinia oder Composable) + Nuxt-Color-Mode-Modul, das FOUC und SSR-Persistenz sauber löst. Bei WordPress/Elementor: Token global im Theme/Child-Theme definieren, nicht pro Elementor-Widget hartcodieren — sonst wird jede Sektion zum Einzelfall.
07
Zukünftiger Mehraufwand
Nach der Einführung ist Dark Mode kein abgeschlossenes Projekt, sondern eine dauerhafte Verpflichtung bei jeder Weiterentwicklung.
+30 %
Daumenregel — Jede künftige Design- oder Komponentenarbeit kostet grob 20–40 % mehr, weil sie in zwei Varianten gebaut und getestet werden muss. Als Mittelwert +30 % kommunizieren.
Neue Komponenten: immer doppelt durchdeklinieren und in beiden Modi visuell prüfen.
QA-Aufwand steigt: jeder Bug, jedes Feature wird in zwei Themes getestet.
Drittanbieter-Updates können den Dark Mode brechen (Plugin/Widget ändert Styles).
Bei Rebranding/Farbänderung: beide Paletten müssen nachgezogen werden.
Empfehlung für Verträge
Wartungspauschale oder Stundenkontingent bei aktivem Dark Mode entsprechend höher ansetzen — oder explizit als Mehraufwand in der Wartung ausweisen.
08
Angebotsformulierung
Bausteine, die du direkt ins Angebot übernehmen kannst — bewusst ohne Pauschalpreis, mit vorgeschalteter Prüfung.
Vorgeschaltete Machbarkeitsprüfung
Vor der Umsetzung führen wir eine kurze technische Machbarkeitsprüfung durch (Analyse der bestehenden Code- und Designstruktur). Auf dieser Basis erstellen wir Ihnen ein belastbares Festangebot. Aufwand der Prüfung: pauschal X Stunden.
Baustein 1 · Audit
Leistungsbeschreibung
Implementierung eines Dark Mode als vollständige zweite Designebene: Aufbau eines zentralen Farb-Token-Systems, Umsetzung aller Komponenten und Zustände (Hintergründe, Text, Buttons, Formulare, Hover-/Fokus-Zustände, Borders, Overlays, Icons), Berücksichtigung der System-Präferenz, manueller Umschalter mit Speicherung der Auswahl sowie Qualitätssicherung über die relevanten Browser und Endgeräte.
Baustein 2 · Umfang
Abgrenzung / Hinweise
Eingebundene Drittanbieter-Komponenten (z. B. Karten, Buchungs- oder Chat-Systeme, Cookie-Banner) lassen sich nur eingeschränkt oder nicht in den Dark Mode überführen; mögliche visuelle Abweichungen liegen außerhalb unseres Einflussbereichs. Der Dark Mode ist eine dauerhafte Designebene — künftige Erweiterungen werden in beiden Varianten umgesetzt und entsprechend kalkuliert.
Baustein 3 · Grenzen & Folgekosten
Nicht ins Angebot
Kein blinder Festpreis ohne Audit. Kein „Dark Mode inklusive" als Wegwerf-Argument im Verkauf — es bindet dich an dauerhaft höheren Wartungsaufwand.