Dark Mode und visueller Komfort

1) Warum ein dunkles Thema

Augenkomfort bei wenig Licht, weniger Blendung und „Lichtblitze“.
Energie: Bei OLED/AMOLED verschwenden die dunklen Bildschirme weniger Batterie.
Fokus auf Daten: Fokus auf Inhalte, nicht auf Hintergründe.
Benutzererwartungen: Das Systemflag 'prefers-color-scheme' ist de facto Standard.

2) Grundsätze

1. Dunkelgrauer Hintergrund> reines Schwarz für UI-Oberflächen (bessere Lesbarkeit und Abstufung).
2. Inhaltlicher Kontrast: nicht „weiß bis schwarz“, sondern weiche Farbtöne für lange Texte.
3. Behutsame „Leuchtkraft“: Die Highlights/Akzente sind gedämpft, aber unterscheidbar.
4. Tiefe ≠ Schatten: Wir arbeiten mit einem hellen/verschwommenen Schatten und nicht mit einem scharfen Kontrast.
5. Verfügbarkeit: WCAG AA (Minimum), sichtbarer Fokus und verständliche Zustände.
6. Die Systemeinstellungen sind primär: automatische Umschaltung und „reduzierte Bewegung“.

3) Palette und Token (Beispiel)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Die Akzente im dunklen Modus sind um + 8-12% heller als im hellen.
• Verwenden Sie Graustufen (4-5 Schritte) und vermeiden Sie bei großen Flächen die absolute # 000 (Ausnahme ist der AMOLED-Modus).

4) Text und Lesbarkeit

Haupttext: hellgrau'# E6E8EB 'auf' # 0E1116'(Kontrast ~ 12:1).
Sekundärtext: „# A6AEB8“; Hinweise - einen Schritt dunkler/transparenter.
Lange Lektüre: leicht warme Farbtöne (reduzieren den „Halo“).
Links - Akzent + Standardunterstreichung; Die Farbe ≠ der einzige Sinnträger.

5) Oberflächen, Tiefe und Glas

Elevations: `base` → `elev1` → `elev2`; jede Schicht ist 2-4% heller/wärmer.
Schatten - weich, breit, mit geringer Deckkraft; Vermeiden Sie „leuchtende“ Striche.
Transluzente Panels (blur) sind mäßig angemessen; Stellen Sie den Kontrast des Textes zur Unterlage sicher.
Trennzeichen sind halbschlanke' --bd-soft '-Grenzen oder kaum wahrnehmbare „Heiras“.

6) Zustände und Fokus

Hover: + 2-3% heller Hintergrund; Aktiv: − 2-3% (dunkler).
Fokus: klarer Ring (z.B. 'outline: 2px solid # 6EA0FF; outline-offset: 2px;'), auch an den Akzenttasten zu erkennen.
Disabled: Reduzieren Sie den Kontrast vorsichtig; nicht unter die lesbare Ebene für den Text fallen.

7) Buttons, Formulare und Tabellen

Primär: Hintergrund '--accent', Text'# 0E1116'.
Sekundär: Hintergrund '--bg-elev1', border '--bd-strong', Text '--fg-primary'.
Eingabefelder: Hintergrund '--bg-elev1', im Fokus - Border Akzent; placeholder ist stumpfer, aber wir lesen.
Tabellen: Zebra-Hintergrund kaum wahrnehmbar, Zeilenauswahl bei Hover - + 2-3% heller.

8) Abbildungen, Logos und Fotos

Logos und Piktogramme - Inversionsversionen auf dunkel; Vermeiden Sie dünne, helle Linien auf gesättigten Hintergründen.
Foto: Fügen Sie eine dunkle Maske (40-60%) für kontrastierende Überschriften hinzu.
Icons: einheitliche Dicke, Kontur + Füllung - je nach Zustand keine „giftigen“ Farben.

9) Datenvisualisierung in einem dunklen Thema

Farben der Reihen - mäßige Sättigung; mindestens 5 unterscheidbare Töne.
Raster und Achsen sind gedämpft (Alpha 20-30%), Signaturen sind '--fg-muted'.
Anmerkungen/Vorfälle - hell, aber lesbar; Form/Marker betonen, nicht nur Farbe.
Leere Daten/Lag sind weiche „Nebel“, keine weißen Felder.

10) Leistung und Batterie

Auf OLED spart wirklich reines Schwarz (# 000) - Verwendung im AMOLED-Modus durch Benutzeroption.
Vermeiden Sie solide große Lichter/blur auf schwachen GPUs.
Respektieren Sie' prefers-reduced-motion': Vereinfachen Sie Animationen/Übergänge.

11) Verhalten und Schalten

Standardmäßig folgt 'prefers-color-scheme'.
Geben Sie dem Benutzer einen expliziten Schalter (Light/Dark/System), speichern Sie die Auswahl (Cookie/localStorage).
Wenn Sie ein Thema ändern - keine Ausbrüche: Fügen Sie vor dem Rendern eine Themenklasse hinzu.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Verfügbarkeit (A11y)

Textkontrast ≥ 4. 5:1 (normal), ≥ 3:1 (groß).
Codieren Sie den Status nicht nur mit Farbe: Verwenden Sie das Symbol/Muster/Signatur.
Fokusstile und Tastaturnavigation sind ein Muss.
VoiceOver/TalkBack: Rollen, Labels, Tabu-Reihenfolge.

13) Anti-Muster

Absolut weißer Text auf einem absolut schwarzen Hintergrund auf großen Flächen - „Flimmern“ und Müdigkeit.
Neonakzente auf dem Dunklen sind „Lichtrauschen“.
Schatten mit hohem Kontrast („grau auf schwarz“ mit einer harten Grenze).
Transparenter Text auf dem Foto ohne Maske.
Verschwindender Platzhalter (Alpha zu niedrig).

14) Beispiele für Komponenten

Schaltfläche

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Karte

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Testplan

Beleuchtung: dunkler Raum/Tageslicht/Straßenabend.
Geräte: OLED und IPS, Mobile/Desktop, verschiedene Dichten.
A11y: Kontrastschreiber, Tastaturpass, Lesbarkeit der Platzhalter.
Wahrnehmung: ab-Test „Augenermüdung“ und Eingabefehler in der Nacht.
Performance: RUM-Metriken (INP/CLS) nach Aufnahme eines dunklen Themas; GPU-Last (Blur/Shadow-Effekte).

16) Qualitätsmetriken

Contrast Violations/1k Elemente (Ziel: → 0).
Complaint Rate auf „zu dunkel/hell“.
Night Session Completion (Verhaltensmetriken nach Sitzungen 22: 00-06: 00).
INP/CLS p75 im Dark Mode gegen Light (nicht schlechter als Basic).
Opt-in Dark Mode und halten Benutzer, die das Thema gewählt haben.

17) Start-Checkliste

• Dunkle Themenpalette mit 4-5 Ebenen von Oberflächen
• Text/Icon/Border Kontrast entspricht WCAG AA
• Sichtbare Fokusstile und Zustände (hover/active/disabled)
• Logos/Icons/Fotos angepasst, Masken auf dem Foto hinzugefügt
• Grafiken - gedämpfte Raster, lesbare Signaturen, keine „giftigen“ Reihen
• Schalter Licht/Dunkel/System, Auswahl speichern ohne „Blitz“
• Respekt für 'prefers-color-scheme' und 'prefers-reduced-motion'
• RUM/perf-dashboard, Regressionsalerts

18) Implementierungsplan (3 Iterationen)

Iteration 1 - Fundament (1-2 Wochen)

Palette/Token, Basisflächen (base/elev1/elev2), Text/Rahmen, Schaltflächen/Felder/Tabellen, Themenschalter.

Iteration 2 - Detaillierung (3-4 Wochen)

Grafiken und Illustrationen im Dunkeln, Masken auf dem Foto, Fokus/Status, Animationen unter Berücksichtigung der reduzierten Bewegung, Perf-Audit.

Iteration 3 - Optimierung (kontinuierlich)

AMOLED-Modus als Option, Feinabstimmung der Kontraste, Usability-Tests bei Nacht, RUM-Vergleich Light vs Dark, regelmäßige Brand/UX-Audits.

19) Mini-FAQ

Machen Sie einen rein schwarzen Hintergrund?
Für UI - besser tief dunkelgrau; netto # 000 mit der Option „AMOLED-Modus“ belassen.

Muss ich die Sättigung der Akzente erhöhen?
In der Dunkelheit - in der Regel im Gegenteil leicht aufhellen und die Sättigung reduzieren, so dass sie nicht „glühen“.

Was ist mit den Bannerbildern?
Fügen Sie eine dunkle Unterlage/Maske hinzu, überprüfen Sie den Kontrast von Text und Logo.

Summe

Ein dunkles Thema ist keine Inversion von Farben, sondern ein separater Designmodus: eine durchdachte Palette, Oberflächenebenen, Lesbarkeit, korrekte Zustände, angepasste Grafiken und Medien sowie der Respekt vor den Systemeinstellungen. Verlassen Sie sich auf Token, steuern Sie Kontrast und Leistung - und der Dark Mode wird ein bequemes, stabiles und schönes Werkzeug für Tag und Nacht Benutzer.