Basic Dark theme and option for theme in settings

lib/app.dart

@@ -44,6 +44,7 @@ class _AppState extends State<App> {
       context,
       controller: tabController,
       navBarStyle: NavBarStyle.style6,
+      backgroundColor: Theme.of(context).colorScheme.onSecondary,
       decoration: const NavBarDecoration(
         border: Border.symmetric(vertical: BorderSide.none, horizontal: BorderSide(color: Colors.grey, width: 1))
       ),
@@ -57,13 +58,13 @@ class _AppState extends State<App> {
       items: [
         PersistentBottomNavBarItem(
           activeColorPrimary: Theme.of(context).primaryColor,
-          inactiveColorPrimary: Theme.of(context).disabledColor,
+          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
           icon: const Icon(Icons.calendar_month),
           title: "Vertretung"
         ),
         PersistentBottomNavBarItem(
           activeColorPrimary: Theme.of(context).primaryColor,
-          inactiveColorPrimary: Theme.of(context).disabledColor,
+          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
           icon: Consumer<ChatListProps>(
             builder: (context, value, child) {
               if(value.primaryLoading()) return const Icon(Icons.chat);
@@ -86,13 +87,13 @@ class _AppState extends State<App> {
         ),
         PersistentBottomNavBarItem(
           activeColorPrimary: Theme.of(context).primaryColor,
-          inactiveColorPrimary: Theme.of(context).disabledColor,
+          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
           icon: const Icon(Icons.folder),
           title: "Dateien"
         ),
         PersistentBottomNavBarItem(
           activeColorPrimary: Theme.of(context).primaryColor,
-          inactiveColorPrimary: Theme.of(context).disabledColor,
+          inactiveColorPrimary: Theme.of(context).colorScheme.secondary,
           icon: const Icon(Icons.more_horiz),
           title: "Mehr"
         ),

lib/data/appTheme.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class AppTheme extends ChangeNotifier {
+  ThemeMode _mode = ThemeMode.system;
+  ThemeMode get getMode => _mode;
+
+  void setTheme(ThemeMode newMode) {
+    _mode = newMode;
+    notifyListeners();
+  }
+
+  static ThemeModeDisplay getDisplayOptions(ThemeMode theme) {
+    switch(theme) {
+      case ThemeMode.system:
+        return ThemeModeDisplay(icon: Icons.auto_awesome, displayName: "Systemvorgabe");
+
+      case ThemeMode.light:
+        return ThemeModeDisplay(icon: Icons.dark_mode_outlined, displayName: "Hell");
+
+      case ThemeMode.dark:
+        return ThemeModeDisplay(icon: Icons.dark_mode, displayName: "Dunkel");
+
+    }
+  }
+}
+
+class ThemeModeDisplay {
+  final IconData icon;
+  final String displayName;
+
+  ThemeModeDisplay({required this.icon, required this.displayName});
+}

lib/main.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:jiffy/jiffy.dart';
+import 'package:marianum_mobile/data/appTheme.dart';
 import 'package:marianum_mobile/data/timetable/timetableProps.dart';
 import 'package:marianum_mobile/screen/login/login.dart';
 import 'package:marianum_mobile/widget/errorView.dart';
@@ -30,6 +31,7 @@ Future<void> main() async {
       MultiProvider(
         providers: [
           ChangeNotifierProvider(create: (context) => AccountModel()),
+          ChangeNotifierProvider(create: (context) => AppTheme()),
           ChangeNotifierProvider(create: (context) => TimetableProps()),
           ChangeNotifierProvider(create: (context) => ChatListProps()),
           ChangeNotifierProvider(create: (context) => ChatProps()),
@@ -70,6 +72,10 @@ class _MainState extends State<Main> {
   Widget build(BuildContext context) {
     SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
 
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: Consumer<AppTheme>(
+        builder: (context, value, child) {
           return MaterialApp(
               debugShowCheckedModeBanner: false,
               localizationsDelegates: const [
@@ -84,6 +90,8 @@ class _MainState extends State<Main> {
 
 
               title: 'Marianum Fulda',
+
+              themeMode: value.getMode,
               theme: ThemeData(
                 brightness: Brightness.light,
                 primaryColor: marianumRed,
@@ -97,7 +105,7 @@ class _MainState extends State<Main> {
                   onBackground: Colors.black,
                   error: marianumRed,
                   background: Colors.white,
-          secondary: marianumRed,
+                  secondary: Colors.grey,
                   primary: marianumRed,
                 ),
                 hintColor: marianumRed,
@@ -112,6 +120,35 @@ class _MainState extends State<Main> {
                 ),
               ),
 
+              darkTheme: ThemeData(
+                brightness: Brightness.dark,
+                primaryColor: marianumRed,
+                colorScheme: const ColorScheme(
+                  brightness: Brightness.dark,
+                  surface: Colors.white,
+                  onSurface: Colors.white,
+                  onSecondary: Colors.black,
+                  onPrimary: Colors.black,
+                  onError: marianumRed,
+                  onBackground: Colors.black,
+                  error: marianumRed,
+                  background: Colors.black,
+                  secondary: Colors.grey,
+                  primary: marianumRed,
+                ),
+                hintColor: marianumRed,
+                inputDecorationTheme: const InputDecorationTheme(
+                  border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)),
+                ),
+                appBarTheme: const AppBarTheme(
+                  backgroundColor: marianumRed,
+                ),
+                progressIndicatorTheme: const ProgressIndicatorThemeData(
+                  color: marianumRed,
+                ),
+              ),
+
+
               home: FutureBuilder<SharedPreferences>(
                 future: _storage,
                 builder: (BuildContext context, AsyncSnapshot<SharedPreferences> snapshot) {
@@ -128,5 +165,8 @@ class _MainState extends State<Main> {
                 },
               )
           );
+        },
+      ),
+    );
   }
 }

lib/screen/settings/settings.dart

@@ -6,6 +6,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 import '../../data/accountModel.dart';
+import '../../data/appTheme.dart';
 import 'debug/debugOverview.dart';
 
 class Settings extends StatefulWidget {
@@ -72,6 +73,35 @@ class _SettingsState extends State<Settings> {
 
           const Divider(),
 
+          Consumer<AppTheme>(
+            builder: (context, value, child) {
+              return ListTile(
+                leading: const Icon(Icons.dark_mode),
+                title: const Text("Farbgebung"),
+                trailing: DropdownButton<ThemeMode>(
+                  value: value.getMode,
+                  icon: const Icon(Icons.arrow_drop_down),
+                  items: ThemeMode.values.map((e) => DropdownMenuItem<ThemeMode>(
+                    value: e,
+                    enabled: e != value.getMode,
+                    child: Row(
+                      children: [
+                        Icon(AppTheme.getDisplayOptions(e).icon),
+                        const SizedBox(width: 10),
+                        Text(AppTheme.getDisplayOptions(e).displayName),
+                      ],
+                    ),
+                  )).toList(),
+                  onChanged: (e) {
+                    Provider.of<AppTheme>(context, listen: false).setTheme(e ?? ThemeMode.system);
+                  },
+                ),
+              );
+            },
+          ),
+
+          const Divider(),
+
           ListTile(
             leading: const Icon(Icons.info),
             title: const Text("Informationen und Lizenzen"),