2026 04 29 dark mode und settings - shedowe19/routely GitHub Wiki
Datum: 2026-04-29
Akzeptiert
Schaffung eines zentralen Einstellungsmenüs zur Entlastung des Profil-Screens und Implementierung eines flexiblen Theming-Systems (Light, Dark, AMOLED) zur Verbesserung der UX.
Die App hatte bisher kein zentrales Einstellungsmenü. Einstellungen, wie die für die Sprachausgabe (TTS), waren stattdessen inline im ProfileScreen platziert. Dies führte zu einer Überfrachtung des Profil-Bildschirms und limitierte die Erweiterbarkeit für zukünftige App-Einstellungen.
Gleichzeitig gab es den Bedarf, verschiedene UI-Themes anzubieten (insbesondere Dark Mode und einen reinen AMOLED-Modus für OLED-Displays), um die User Experience zu verbessern und die Barrierefreiheit zu erhöhen.
Wir haben uns für folgende Architektur- und Design-Anpassungen entschieden:
-
Zentrales Einstellungsmenü (
SettingsScreen&SettingsViewModel): Wir haben einen neuen Bereich für Einstellungen geschaffen. DasSettingsViewModelübernimmt alle Zustandsverwaltungen für Anwendungspräferenzen. Der TTS-Code wurde aus demProfileViewModelextrahiert und in das neue ViewModel überführt. Auf demProfileScreenwurde die TTS-Sektion durch einen Button ersetzt, der zumSettingsScreennavigiert. -
App-Theme Präferenz: In
PreferencesManagerwurde ein neuer KeyKEY_APP_THEMEhinzugefügt, der einen String repräsentiert ("LIGHT","DARK","AMOLED"). Die Flow-PropertyappThememacht diese Einstellung reaktiv in der gesamten App verfügbar. -
Erweiterung des Theming-Systems (
Theme.kt): Die DateiTheme.ktwurde um zwei neue Farbschemata erweitert:DarkColorSchemeundAmoledColorScheme(welches primär auf tiefem Schwarz als Hintergrund basiert). Die@Composable TraewellingThemeFunktion wurde so angepasst, dass sie einenthemeParameter (String) akzeptiert und das entsprechende Material 3ColorSchemeanwendet. -
Reaktives UI-Update: In der
MainActivity.ktwird der Theme-State (appTheme) viasettingsViewModelaus demPreferencesManagergelesen. DieTraewellingTheme-Komponente umschließt denNavHostund reagiert automatisch auf Änderungen dieses States.
-
SettingsScreen.kt: Neue UI für Einstellungen. -
SettingsViewModel.kt: Zustandsverwaltung für Einstellungen und TTS. -
PreferencesManager.kt: Speicherung des Theme- und TTS-Zustands. -
Theme.kt: Erweiterung um Dark- und AMOLED-Farbschemata. -
MainActivity.kt: Reagiert auf Theme-Änderungen und wendet diese global an.
Die App startet standardmäßig im Light Mode. Wenn der Nutzer über die Einstellungen (via Profil-Screen erreichbar) das Theme auf Dark oder AMOLED ändert, wird der KEY_APP_THEME im Datastore aktualisiert. Das SettingsViewModel propagiert diese Änderung als StateFlow zur MainActivity, was einen sofortigen Re-Render der gesamten App mit dem neuen Farbschema (DarkColorScheme oder AmoledColorScheme) auslöst. TTS-Einstellungen werden durch eine leere String-Korrektur zu null ebenfalls sicher an das System-Standard-TTS delegiert.
-
androidx.datastore:datastore-preferences: Zur Speicherung der Einstellungen (PreferencesManager). - Android
TextToSpeechAPI: Für die Sprachausgabe (TTS). - Jetpack Compose: Für dynamisches Theming und UI.
- Positiv: Der Profil-Screen ist nun aufgeräumter. Das neue Einstellungsmenü bietet einen klaren Ort für zukünftige Konfigurationen. Die Unterstützung von Dark- und AMOLED-Modes erhöht den Komfort, schont die Augen und potenziell den Akku bei OLED-Geräten.
-
Positiv: Bessere Separation of Concerns, da
ProfileViewModelnicht mehr für globale Einstellungen wie TTS zuständig ist. -
Negativ: Leicht erhöhte Komplexität in
MainActivitydurch das Hinzufügen einer weiteren ViewModel-Abhängigkeit zur Überwachung des Theme-States auf Root-Ebene.
- Weitere Anpassung individueller Farbskalen bei künftigen Features — offen — @dev
- Mögliche automatische Anpassung des Themes nach System-Einstellungen (Day/Night) — offen — @dev