Schau dir mal dein Smartphone an: Welchen Modus hast du eingestellt? Wenn du wie die Mehrheit bist, ist es Dark Mode. Über 80% der Smartphone-Nutzer verwenden den dunklen Modus — und sie erwarten das auch von Websites. Meine eigene Website dosigny.com ist seit dem Start im Dark Mode. Hier ist warum das Sinn macht und wie du es umsetzt.
Warum Dark Mode?
Augenschonend. Gerade abends und bei schlechten Lichtverhältnissen ist ein dunkler Hintergrund angenehmer für die Augen. Weniger Blaulichtemission bedeutet weniger Augenermüdung. Für Websites die Nutzer länger besuchen (Blogs, Tools, Portfolios) ist das ein echtes Plus.
Akkulaufzeit. Auf OLED-Displays (die mittlerweile Standard sind bei Smartphones und vielen Laptops) verbrauchen schwarze Pixel keinen Strom. Eine dunkle Website kann die Akkulaufzeit mobiler Nutzer spürbar verlängern.
Moderne Ästhetik. Dark Mode wirkt elegant, professionell und technisch. Farben und Bilder stechen auf dunklem Hintergrund stärker hervor. Nicht umsonst setzen Tech-Unternehmen, Kreativagenturen und SaaS-Produkte auf dunkle Designs.
Wie du Dark Mode technisch umsetzt
Es gibt zwei Ansätze:
Ansatz 1: Dark Mode als Standard. Du designst die Website von Anfang an dunkel — so wie meine eigene. Das ist der einfachere Weg wenn du ohnehin ein Redesign planst. Hintergrund in dunklen Tönen (nicht reines Schwarz — #0c0816 ist angenehmer als #000000), helle Schrift, Akzentfarben die auf dunklem Grund leuchten.
Ansatz 2: Toggle oder System-Präferenz. Du bietest beide Modi an und lässt den Nutzer wählen — oder du folgst automatisch der Systemeinstellung. CSS macht das mit prefers-color-scheme möglich:
Der Schlüssel sind CSS Custom Properties (Variablen). Du definierst alle Farben als Variablen und wechselst sie je nach Modus. So musst du nicht jede einzelne Farbe doppelt definieren, sondern änderst nur die Variablen-Werte. Für Texte, Hintergründe, Borders, Hover-States — alles über Variablen.
Häufige Fehler bei Dark Mode
Reines Schwarz (#000) mit reinem Weiß (#fff). Das erzeugt zu hohen Kontrast und ist unangenehm zu lesen. Besser: Dunkelgrau bis Tiefblau für Hintergründe, gebrochenes Weiß für Text. Deine Augen werden es dir danken.
Bilder und Logos vergessen. Ein Logo das für hellen Hintergrund designt wurde, verschwindet im Dark Mode. Du brauchst eine helle Variante für dunkle Hintergründe. Gleiches gilt für Screenshots und Grafiken.
Kontraste nicht prüfen. Dark Mode heißt nicht automatisch barrierefrei. Prüfe die Kontraste deiner Farbkombinationen — WCAG verlangt mindestens 4,5:1 für normalen Text.
Dark Mode technisch umsetzen: CSS prefers-color-scheme
Die technische Umsetzung ist einfacher als viele denken. Mit der CSS Media Query prefers-color-scheme erkennt die Website automatisch die Systemeinstellung des Nutzers:
/* Light Mode (Standard) */
:root {
--bg: #ffffff;
--text: #1e293b;
--surface: #f8fafc;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0c0816;
--text: #e2e8f0;
--surface: #1a1a2e;
}
}Mit CSS Custom Properties (Variablen) musst du die Farben nur einmal an zentraler Stelle definieren. Der Rest der Website nutzt die Variablen und passt sich automatisch an. Optional: Ein Toggle-Button, mit dem Nutzer manuell zwischen Light und Dark wechseln können — die Präferenz wird per localStorage gespeichert. Auf meiner Website dosigny.com nutze ich einen ähnlichen Ansatz für das dunkle Theme.
Wann Dark Mode sinnvoll ist — und wann nicht
Dark Mode ist nicht für jede Website die richtige Wahl. Sinnvoll ist er für: Tech-Websites und Apps (Zielgruppe erwartet es), Portfolio-Seiten (Bilder wirken auf dunklem Hintergrund intensiver), Abend-Content (Blogs, Nachrichten die oft spät gelesen werden). Weniger sinnvoll: Kinder-Websites, bestimmte Branchen wo Helligkeit und Frische erwartet werden (z.B. Bäckereien, Blumenläden), und Content-lastige Seiten wo lange Fließtexte gelesen werden müssen — da ist heller Hintergrund ergonomisch überlegen. Im Zweifelsfall: Biete beides an und lass den Nutzer wählen. Die CSS-Implementierung mit prefers-color-scheme macht das mit wenigen Zeilen Code möglich.
Dark Mode und Barrierefreiheit
Ein oft übersehenes Thema: Dark Mode kann die Barrierefreiheit sowohl verbessern als auch verschlechtern. Für Nutzer mit Lichtempfindlichkeit oder Migräne ist Dark Mode eine Erleichterung. Aber: Zu geringe Kontraste auf dunklem Hintergrund (hellgrauer Text auf dunkelgrauem Grund) sind ein häufiger Fehler. Prüfe jeden Text und jedes UI-Element mit dem Kontrast-Checker — sowohl im Light als auch im Dark Mode.
Passende Leistungen & Tools
