🌙 Dark-Mode / Theming

Der Dark-Mode ist eine dunkle Farbvariante der Benutzeroberfläche einer App. Er sorgt für bessere Lesbarkeit bei schwachem Licht, reduziert die Augenbelastung und spart auf OLED-Geräten sogar Strom. „Theming“ bedeutet, dass eine App anpassbare Farbpaletten und Styles verwendet, um Design und Markenidentität flexibel und nutzerfreundlich zu gestalten. Viele Nutzer schätzen Apps, die automatisch zwischen hell und dunkel umschalten können – abhängig vom System oder persönlichen Einstellungen.

🔧 Technische Erklärung

In Expo-kompatiblen React Native Apps lässt sich der Dark-Mode und Theming ganz einfach mithilfe von React Native’s Appearance API und modernen UI-Libraries realisieren.

Relevante Tools und APIs:

1. react-native-appearance (früher)
   Heute meist direkt über:
   → useColorScheme() von React Native Core (auch in Expo verfügbar)

2. tailwind-rn, nativewind, styled-components, react-native-paper
   Diese Libraries unterstützen dynamisches Theming basierend auf Systemfarbe

3. Custom ThemeProvider
   Eigene Theme-Objekte mit Farben, Fonts, Abständen etc.
   → über Context oder UI-Library (z. B. styled-components ThemeProvider)

Funktionsweise:

• useColorScheme() liefert "light" oder "dark" je nach System

• Das UI passt sich automatisch oder manuell an

• Komponenten reagieren auf Theme: Texte, Hintergründe, Icons, Buttons

• Nutzer können einen Schalter in der App bekommen (z. B. "Dark Mode aktivieren")

💡 Einsatzmöglichkeiten

• Dark-Mode für bessere Lesbarkeit nachts oder in dunklen Räumen

• Markenkonsistenz durch individuelles Theming (z. B. eigene CI-Farben)

• Accessibility-Optimierung für Sehbehinderte durch höheren Kontrast

• User-preference gesteuertes UI (Nutzer entscheidet hell oder dunkel)

• Automatische Anpassung an Geräte-Einstellung (Android/iOS)

❓ Wichtige Fragen und Antworten zum Dark-Mode / Theming

Wie erkennt die App den System-Dark-Mode?
Mit useColorScheme() aus react-native (auch in Expo) kann automatisch erkannt werden, ob das Gerät im Dunkelmodus läuft.

Kann ich einen eigenen Dark-Mode-Stil definieren?
Ja – du kannst ein separates Theme-Objekt (Farben, Fonts, Styles) für "dark" definieren und es dynamisch anwenden.

Können Nutzer selbst zwischen Hell/Dunkel wählen?
Ja – du kannst zusätzlich zum Systemstatus einen Dark-Mode-Schalter in den Einstellungen der App anbieten und die Präferenz speichern (z. B. in AsyncStorage).

Beeinflusst Dark-Mode die App-Performance?
Nein – die Änderung des Themas beeinflusst nur das UI, nicht die App-Logik. Bei richtiger Umsetzung ist die Performance gleichbleibend.

Wie wirkt sich der Dark-Mode auf Barrierefreiheit aus?
Positiv: Höhere Kontraste und geringere Helligkeit schonen die Augen. Wichtig: Texte, Icons und Buttons müssen im Dark-Mode gut sichtbar bleiben (z. B. nicht grau auf schwarz).