Warum ein Dark Mode?
Studien zeigen: Dunkle Oberflächen reduzieren die Augenbelastung bei schlechten Lichtverhältnissen und können auf OLED-Displays bis zu 30% Energie sparen. Für Mitarbeiter, die täglich mit SL-UP arbeiten, bedeutet das: weniger Ermüdung und angenehmeres Arbeiten.
Was kann der Dark Mode?
Manueller Toggle
Ein-Klick-Umschaltung zwischen Hell und Dunkel über das Sonne/Mond-Icon in der Kopfleiste.
System-Erkennung
Beim ersten Besuch wird automatisch das Betriebssystem-Theme erkannt (prefers-color-scheme).
Alle Bereiche
Dashboard, Kalender, Formulare, Modals, Berichte – Dark Mode funktioniert überall konsistent.
localStorage-Persistenz
Die Einstellung wird im Browser gespeichert und bleibt über Sessions hinweg erhalten.
So aktivieren Sie den Dark Mode
Toggle in der Kopfleiste
Klicken Sie auf das Sonne/Mond-Icon rechts oben in der Navigation. Die Seite wechselt sofort in den dunklen Modus – ohne Neuladen.
Automatische Erkennung
Wenn Sie den Dark Mode noch nie manuell umgeschaltet haben, erkennt SL-UP Ihr Betriebssystem-Theme. Unter Windows, macOS und iOS/Android wird prefers-color-scheme ausgewertet.
Zurücksetzen
Ein erneuter Klick auf den Toggle schaltet zurück. Die manuelle Wahl hat immer Vorrang vor der System-Erkennung.
Was wird im Dark Mode angepasst?
Der Dark Mode ändert nicht einfach nur die Hintergrundfarbe. Alle Elemente werden sorgfältig angepasst:
- Hintergründe: Von Weiß (#fff) zu Dunkelgrau (#1e293b / #0f172a)
- Texte: Von Dunkel zu Hell – mit optimiertem Kontrast (WCAG AA)
- Karten & Cards: Dezente Borders und erhöhte Schatten für Tiefenwirkung
- Formulare: Eingabefelder, Dropdowns und Buttons mit angepassten Farben
- Kalender: Farbige Markierungen bleiben gut erkennbar, Hintergrund wird dunkel
- Tabellen: Alternierene Zeilenfarben für Lesbarkeit
- Modals: Dunkler Hintergrund mit hellem Overlay
- Sidebar: Angepasste Farben für Navigation und aktive Links
Technisch: CSS Custom Properties
Der Dark Mode nutzt CSS Custom Properties (Variablen). Beim Umschalten wird eine Klasse data-theme="dark" auf das HTML-Element gesetzt, die alle CSS-Variablen überschreibt. So bleibt der Code wartbar und performant – kein separates Stylesheet nötig.
Was bedeutet der Dark Mode für die Barrierefreiheit?
Der Dark Mode berücksichtigt Barrierefreiheits-Standards:
- WCAG AA Kontrast: Alle Text/Hintergrund-Kombinationen erfüllen mindestens das AA-Level
- Fokus-Indikatoren: Sichtbare Fokus-Ringe auch im Dark Mode
- Farbenblindheit: Informationen werden nie nur durch Farbe vermittelt
- Keine Flashs: Der Übergang zwischen Hell und Dunkel ist fließend (CSS Transition)
Dark Mode und Produktivität
Wer abends oder in schlecht beleuchteten Räumen arbeitet, merkt schnell: ein heller weißer Bildschirm ist auf Dauer anstrengend. Studien zeigen, dass dunkle Oberflächen die Augenbelastung bei niedrigem Umgebungslicht signifikant reduzieren können. Das wirkt sich direkt auf die Konzentration und das Wohlbefinden aus – besonders bei längerer Bildschirmarbeit.
Auf OLED-Displays spart echter Schwarz-Hintergrund zusätzlich Akkuleistung, da schwarze Pixel vollständig abgeschaltet werden. Auf mobilen Geräten kann das je nach Nutzungsmuster bis zu 30 % Energieersparnis bedeuten. Für Teams, die SL-UP auf Tablet oder Smartphone nutzen, ist Dark Mode also nicht nur komfortabler, sondern auch effizienter.