Add dark mode selection/theming

lib/app_theme.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+
+class AppTheme {
+  static ThemeData light = ThemeData(primarySwatch: Colors.indigo);
+
+  static ThemeData dark = ThemeData.from(
+      colorScheme: ColorScheme.fromSwatch(
+    primarySwatch: Colors.cyan,
+    brightness: Brightness.dark,
+  ));
+}

lib/controls/app_bottom_nav_bar.dart

@@ -48,10 +48,8 @@ class AppBottomNavBar extends StatelessWidget {
         }
       },
       type: BottomNavigationBarType.fixed,
-      selectedItemColor: Colors.black,
-      unselectedItemColor: Colors.black54,
       currentIndex: _buttonToIndex(currentButton),
-      items: _menuItems(hasNotifications),
+      items: _menuItems(context, hasNotifications),
     );
   }
 
@@ -88,7 +86,8 @@ class AppBottomNavBar extends StatelessWidget {
     throw ArgumentError('$index has no button type');
   }
 
-  List<BottomNavigationBarItem> _menuItems(bool hasNotifications) {
+  List<BottomNavigationBarItem> _menuItems(
+      BuildContext context, bool hasNotifications) {
     return [
       const BottomNavigationBarItem(
         label: 'Timelines',

lib/main.dart

@@ -4,6 +4,7 @@ import 'package:logging/logging.dart';
 import 'package:multi_trigger_autocomplete/multi_trigger_autocomplete.dart';
 import 'package:provider/provider.dart';
 
+import 'app_theme.dart';
 import 'di_initialization.dart';
 import 'globals.dart';
 import 'routes.dart';
@@ -40,51 +41,56 @@ class App extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
-    return Portal(
-      child: MultiProvider(
-        providers: [
-          ChangeNotifierProvider<SettingsService>(
-            create: (_) => getIt<SettingsService>(),
-            lazy: true,
+    return AnimatedBuilder(
+      builder: (context, child) {
+        return Portal(
+          child: MultiProvider(
+            providers: [
+              ChangeNotifierProvider<SettingsService>(
+                create: (_) => getIt<SettingsService>(),
+                lazy: true,
+              ),
+              ChangeNotifierProvider<AuthService>(
+                create: (_) => getIt<AuthService>(),
+                lazy: true,
+              ),
+              ChangeNotifierProvider<ConnectionsManager>(
+                create: (_) => getIt<ConnectionsManager>(),
+                lazy: true,
+              ),
+              ChangeNotifierProvider<EntryManagerService>(
+                create: (_) => getIt<EntryManagerService>(),
+                lazy: true,
+              ),
+              ChangeNotifierProvider<GalleryService>(
+                create: (_) => getIt<GalleryService>(),
+                lazy: true,
+              ),
+              ChangeNotifierProvider<HashtagService>(
+                create: (_) => getIt<HashtagService>(),
+                lazy: true,
+              ),
+              ChangeNotifierProvider<TimelineManager>(
+                create: (_) => getIt<TimelineManager>(),
+              ),
+              ChangeNotifierProvider<NotificationsManager>(
+                create: (_) => getIt<NotificationsManager>(),
+              ),
+            ],
+            child: MaterialApp.router(
+              theme: AppTheme.light,
+              darkTheme: AppTheme.dark,
+              themeMode: getIt<SettingsService>().themeMode,
+              debugShowCheckedModeBanner: false,
+              scrollBehavior: AppScrollingBehavior(),
+              routerDelegate: appRouter.routerDelegate,
+              routeInformationProvider: appRouter.routeInformationProvider,
+              routeInformationParser: appRouter.routeInformationParser,
+            ),
           ),
-          ChangeNotifierProvider<AuthService>(
-            create: (_) => getIt<AuthService>(),
-            lazy: true,
-          ),
-          ChangeNotifierProvider<ConnectionsManager>(
-            create: (_) => getIt<ConnectionsManager>(),
-            lazy: true,
-          ),
-          ChangeNotifierProvider<EntryManagerService>(
-            create: (_) => getIt<EntryManagerService>(),
-            lazy: true,
-          ),
-          ChangeNotifierProvider<GalleryService>(
-            create: (_) => getIt<GalleryService>(),
-            lazy: true,
-          ),
-          ChangeNotifierProvider<HashtagService>(
-            create: (_) => getIt<HashtagService>(),
-            lazy: true,
-          ),
-          ChangeNotifierProvider<TimelineManager>(
-            create: (_) => getIt<TimelineManager>(),
-          ),
-          ChangeNotifierProvider<NotificationsManager>(
-            create: (_) => getIt<NotificationsManager>(),
-          ),
-        ],
-        child: MaterialApp.router(
-          theme: ThemeData(
-            primarySwatch: Colors.indigo,
-          ),
-          debugShowCheckedModeBanner: false,
-          scrollBehavior: AppScrollingBehavior(),
-          routerDelegate: appRouter.routerDelegate,
-          routeInformationProvider: appRouter.routeInformationProvider,
-          routeInformationParser: appRouter.routeInformationParser,
-        ),
-      ),
+        );
+      },
+      animation: getIt<SettingsService>(),
     );
   }
 }

lib/screens/home.dart

@@ -81,8 +81,8 @@ class _HomeScreenState extends State<HomeScreen> {
               context.push('/post/new');
             },
             icon: Icon(
-              Icons.add,
-              color: Theme.of(context).primaryColor,
+              Icons.edit,
+              color: Theme.of(context).textTheme.bodyText1!.color,
             ),
           ),
         ],

lib/screens/settings_screen.dart

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
-import 'package:friendica_portal/services/setting_service.dart';
 import 'package:provider/provider.dart';
 
 import '../controls/standard_appbar.dart';
+import '../services/setting_service.dart';
+import '../utils/theme_mode_extensions.dart';
 
 class SettingsScreen extends StatelessWidget {
   @override
@@ -16,6 +17,7 @@ class SettingsScreen extends StatelessWidget {
             child: ListView(
               children: [
                 buildLowBandwidthWidget(settings),
+                buildThemeWidget(settings),
               ],
             ),
           ),
@@ -33,4 +35,21 @@ class SettingsScreen extends StatelessWidget {
       ),
     );
   }
+
+  Widget buildThemeWidget(SettingsService settings) {
+    return ListTile(
+      title: const Text('Dark Mode Theme:'),
+      trailing: DropdownButton<ThemeMode>(
+        value: settings.themeMode,
+        items: ThemeMode.values
+            .map((m) => DropdownMenuItem(value: m, child: Text(m.toLabel())))
+            .toList(),
+        onChanged: (value) {
+          if (value != null) {
+            settings.themeMode = value;
+          }
+        },
+      ),
+    );
+  }
 }

lib/services/setting_service.dart

@@ -1,6 +1,8 @@
-import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
+import '../utils/theme_mode_extensions.dart';
+
 class SettingsService extends ChangeNotifier {
   late final SharedPreferences _prefs;
   var _initialized = false;
@@ -17,14 +19,26 @@ class SettingsService extends ChangeNotifier {
     notifyListeners();
   }
 
+  var _themeMode = ThemeMode.system;
+
+  ThemeMode get themeMode => _themeMode;
+
+  set themeMode(ThemeMode mode) {
+    _themeMode = mode;
+    _prefs.setString(_themeModeKey, _themeMode.name);
+    notifyListeners();
+  }
+
   Future<void> initialize() async {
     if (_initialized) {
       return;
     }
     _prefs = await SharedPreferences.getInstance();
     _lowBandwidthMode = _prefs.getBool(_lowBandwidthModeKey) ?? false;
+    _themeMode = ThemeModeExtensions.parse(_prefs.getString(_themeModeKey));
     _initialized = true;
   }
 }
 
 const _lowBandwidthModeKey = 'LowBandwidthMode';
+const _themeModeKey = 'ThemeMode';

lib/utils/theme_mode_extensions.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+extension ThemeModeExtensions on ThemeMode {
+  static ThemeMode parse(String? themeModeString) =>
+      ThemeMode.values.firstWhere(
+        (m) => m.name == themeModeString,
+        orElse: () => ThemeMode.system,
+      );
+
+  String toLabel() {
+    switch (this) {
+      case ThemeMode.system:
+        return 'System';
+      case ThemeMode.light:
+        return 'Light';
+      case ThemeMode.dark:
+        return 'Dark';
+    }
+  }
+}