Der Dark Mode ist eine alternative Darstellungsweise von Websites, bei der helle Inhalte auf dunklem Hintergrund gezeigt werden. Er ist in vielen Apps und Betriebssystemen längst Standard – und wird auch im Webdesign immer beliebter.
Vorteile des Dark Mode
- Augenschonend bei wenig Umgebungslicht
- Stilistisch modern und reduziert
- Energieeffizient bei OLED-Displays
- Bietet Nutzern mehr Kontrolle über ihre Darstellung
Technische Umsetzung
Moderne Websites erkennen über eine Media Query (prefers-color-scheme), ob ein Nutzer den Dark Mode aktiviert hat – und passen das Styling automatisch an.
cssKopierenBearbeiten@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
}
Gute Themes und Page Builder bieten diese Option bereits out of the box. Wichtig: Auch in dunkler Darstellung müssen Kontraste und Barrierefreiheit gewährleistet bleiben.
Wann ist Dark Mode sinnvoll?
- Für Zielgruppen, die oft mobil unterwegs sind
- Bei Anwendungen mit längerer Verweildauer
- Wenn es zur Markenästhetik passt
Der Klicklounge-Tipp: Wir integrieren den Dark Mode dann, wenn er gestalterisch Sinn ergibt – und achten dabei auf optimale Lesbarkeit, saubere technische Umsetzung und eine zugängliche Nutzererfahrung.