Dark Mode ist 2026 kein «Nice-to-have» mehr – es ist eine Nutzererwartung. Betriebssysteme, Apps und Browser bieten Dark Mode als Standard. Wenn Ihre Website das nicht unterstützt, fällt das auf. Aber: Dark Mode ist technisch und gestalterisch anspruchsvoller, als die meisten denken.
Warum einfaches Invertieren nicht reicht
Der häufigste Fehler: filter: invert(1) auf das gesamte CSS anwenden. Das Ergebnis sind invertierte Bilder, falsche Markenfarben und Kontraste, die auf dunklem Hintergrund nicht funktionieren. Schwarz-auf-Weiss funktioniert nicht als Weiss-auf-Schwarz – die Kontrastverhältnisse sind unterschiedlich, und das menschliche Auge reagiert anders auf hellen Text auf dunklem Grund.
Die richtige Herangehensweise
Arbeiten Sie mit Design Tokens: Definieren Sie Farben nicht als fixe Werte, sondern als CSS Custom Properties (Variablen), die sich je nach Modus ändern. --color-bg, --color-text, --color-surface, --color-accent. Im Light Mode füllen Sie diese mit hellen Werten, im Dark Mode mit dunklen – und jedes Element referenziert nur die Variable.
Dunkler Hintergrund heisst nicht Schwarz: Reines Schwarz (#000000) auf Bildschirmen ist anstrengend für die Augen. Verwenden Sie dunkle Grautöne (#121212 bis #1E1E1E) mit einem leichten Warm-Shift. Apple und Google verwenden in ihren Design-Systemen bewusst Off-Black-Töne.
Bilder und Grafiken anpassen: Logos mit transparentem Hintergrund können auf dunklem Grund verschwinden. Stellen Sie für den Dark Mode alternative Asset-Varianten bereit. SVG-Icons sollten currentColor verwenden, damit sie automatisch die Textfarbe übernehmen.
Schatten überdenken: Box-Shadows, die auf weissem Hintergrund Tiefe erzeugen, sind auf dunklem Hintergrund unsichtbar. Arbeiten Sie stattdessen mit leicht helleren Surface-Farben für erhöhte Elemente – je höher die Elevation, desto heller die Fläche.
Technische Umsetzung
Nutzen Sie die Media Query prefers-color-scheme, um den System-Modus zu respektieren. Bieten Sie zusätzlich einen manuellen Toggle an, der die Präferenz im LocalStorage speichert. Und testen Sie: Lesen Sie Ihre eigene Website 10 Minuten im Dark Mode. Wenn Ihre Augen müde werden, stimmt etwas mit den Kontrasten nicht.
Dark Mode ist nicht nur Ästhetik – er spart Energie auf OLED-Screens, reduziert Augenbelastung bei schlechten Lichtverhältnissen und ist ein echtes Accessibility-Feature für lichtempfindliche Nutzer. Es lohnt sich, es richtig zu machen.
Möchten Sie Dark Mode auf Ihrer Website professionell umsetzen? Die Sidora AG implementiert Dark Mode als integralen Bestandteil Ihres Designs. Sprechen Sie uns an.
