188-BUG-Dark-Mode (#244)

* bug solved * solved light mode text not showing --------- Co-authored-by: ge59dil <[email protected]>
TUM-Dev · Jan 25, 2024 · cbef0f3 · cbef0f3
1 parent 02950ca
commit cbef0f3
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 15 deletions.
diff --git a/lib/models/settings/setting_state_model.dart b/lib/models/settings/setting_state_model.dart
@@ -8,6 +8,8 @@ class SettingState {
   final List<UserSetting>? userSettings;
   final AppError? error;
   final bool isDarkMode;
+  final bool isLightMode;
+  final bool isSystemDefault;
   final bool isPushNotificationsEnabled;
   final bool isDownloadWithWifiOnly;
 
@@ -16,6 +18,8 @@ class SettingState {
     this.userSettings,
     this.error,
     this.isDarkMode = false,
+    this.isLightMode =false,
+    this.isSystemDefault =true,
     this.isPushNotificationsEnabled = true,
     this.isDownloadWithWifiOnly = true,
   });
@@ -25,6 +29,8 @@ class SettingState {
     List<UserSetting>? userSettings,
     AppError? error,
     bool? isDarkMode,
+    bool? isLightMode,
+    bool? isSystemDefault,
     bool? isPushNotificationsEnabled,
     bool? isDownloadWithWifiOnly,
   }) {
@@ -33,6 +39,8 @@ class SettingState {
       userSettings: userSettings ?? this.userSettings,
       error: error ?? this.error,
       isDarkMode: isDarkMode ?? this.isDarkMode,
+      isLightMode: isLightMode ?? this.isLightMode,
+      isSystemDefault: isSystemDefault ?? this.isSystemDefault,
       isPushNotificationsEnabled:
       isPushNotificationsEnabled ?? this.isPushNotificationsEnabled,
       isDownloadWithWifiOnly:

diff --git a/lib/view_models/setting_view_model.dart b/lib/view_models/setting_view_model.dart
@@ -50,18 +50,28 @@ class SettingViewModel extends StateNotifier<SettingState> {
   }
 
   Future<void> loadThemePreference(SharedPreferences prefs) async {
-    final themePreference = prefs.getString('themeMode') ?? 'light';
-    state = state.copyWith(isDarkMode: themePreference == 'dark');
+    // Default to 'system' if no preference is set
+    final themePreference = prefs.getString('themeMode') ?? 'system';
+    updateThemeMode(themePreference);
   }
 
   Future<void> saveThemePreference(String theme, WidgetRef ref) async {
     final prefs = await SharedPreferences.getInstance();
     await prefs.setString('themeMode', theme);
+    updateThemeMode(theme);
 
-    state = state.copyWith(isDarkMode: theme == 'dark');
-
+    // Update the UI theme mode based on the selected preference
     ref.read(themeModeProvider.notifier).state =
-    theme == 'dark' ? ThemeMode.dark : ThemeMode.light;
+    theme == 'dark' ? ThemeMode.dark : theme == 'light' ? ThemeMode.light : ThemeMode.system;
+  }
+
+  void updateThemeMode(String themePreference) {
+    // Update the state with the new theme preference
+    state = state.copyWith(
+        isDarkMode: themePreference == 'dark',
+        isLightMode: themePreference == 'light',
+        isSystemDefault: themePreference == 'system',
+    );
   }
 
   Future<void> loadNotificationPreference(SharedPreferences prefs) async {

diff --git a/lib/views/settings_view/settings_screen_view.dart b/lib/views/settings_view/settings_screen_view.dart
@@ -67,16 +67,7 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
                 },
                 ref: ref,
               ),
-              _buildSwitchListTile(
-                title: 'Dark mode',
-                value: settingState.isDarkMode,
-                onChanged: (value) {
-                  ref
-                      .read(settingViewModelProvider.notifier)
-                      .saveThemePreference(value ? 'dark' : 'light', ref);
-                },
-                ref: ref,
-              ),
+              _buildThemeSelectionTile(context, ref),
               _buildSwitchListTile(
                 title: 'Download Over Wi-Fi only',
                 value: settingState.isDownloadWithWifiOnly,
@@ -120,6 +111,61 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
     );
   }
 
+  ListTile _buildThemeSelectionTile(BuildContext context, WidgetRef ref) {
+    // Get the current theme setting from the state
+    final settingState = ref.watch(settingViewModelProvider);
+
+    String themeModeText;
+    if (settingState.isDarkMode) {
+      themeModeText = 'Dark Mode';
+    } else if (settingState.isLightMode) {
+      themeModeText = 'Light Mode';
+    } else {
+      themeModeText = 'System Default';
+    }
+
+    return ListTile(
+      title: const Text('Choose Theme'),
+      subtitle: Text(themeModeText),
+      trailing: const Icon(Icons.arrow_forward_ios),
+      onTap: () => _showThemeSelectionSheet(context, ref),
+    );
+  }
+
+  void _showThemeSelectionSheet(BuildContext context, WidgetRef ref) {
+    showModalBottomSheet(
+      context: context,
+      builder: (BuildContext context) {
+        return SafeArea(
+          child: Wrap(
+            children: <Widget>[
+              ListTile(
+                title: const Text('System Default'),
+                onTap: () {
+                  ref.read(settingViewModelProvider.notifier).saveThemePreference('system', ref);
+                  Navigator.pop(context);
+                },
+              ),
+              ListTile(
+                title: const Text('Dark Mode'),
+                onTap: () {
+                  ref.read(settingViewModelProvider.notifier).saveThemePreference('dark', ref);
+                  Navigator.pop(context);
+                },
+              ),
+              ListTile(
+                title: const Text('Light Mode'),
+                onTap: () {
+                  ref.read(settingViewModelProvider.notifier).saveThemePreference('light', ref);
+                  Navigator.pop(context);
+                },
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
   ListTile _buildProfileTile(userState) {
      final settingState = ref.watch(settingViewModelProvider);
     final preferredNameSetting = settingState.userSettings?.firstWhere(