Added darkmode for chat view

lib/data/appTheme.dart

@@ -22,6 +22,10 @@ class AppTheme extends ChangeNotifier {
 
     }
   }
+
+  static bool isDarkMode(BuildContext context) {
+    return Theme.of(context).brightness == Brightness.dark;
+  }
 }
 
 class ThemeModeDisplay {

lib/main.dart

@@ -6,6 +6,8 @@ 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/theming/darkAppTheme.dart';
+import 'package:marianum_mobile/theming/lightAppTheme.dart';
 import 'package:marianum_mobile/widget/errorView.dart';
 import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -50,7 +52,6 @@ class Main extends StatefulWidget {
 }
 
 class _MainState extends State<Main> {
-  static const Color marianumRed = Color.fromARGB(255, 153, 51, 51);
 
   final Future<SharedPreferences> _storage = SharedPreferences.getInstance();
 
@@ -92,61 +93,8 @@ class _MainState extends State<Main> {
               title: 'Marianum Fulda',
 
               themeMode: value.getMode,
-              theme: ThemeData(
+              theme: LightAppTheme.theme,
-                brightness: Brightness.light,
+              darkTheme: DarkAppTheme.theme,
-                primaryColor: marianumRed,
-                colorScheme: const ColorScheme(
-                  brightness: Brightness.light,
-                  surface: Colors.white,
-                  onSurface: Colors.black,
-                  onSecondary: Colors.white,
-                  onPrimary: Colors.white,
-                  onError: marianumRed,
-                  onBackground: Colors.black,
-                  error: marianumRed,
-                  background: Colors.white,
-                  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,
-                ),
-              ),
-
-              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>(

lib/screen/pages/more/debug/ThemeColors.dart

@@ -0,0 +1,128 @@
+import 'package:flutter/material.dart';
+
+class ColorPreviewWidget extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final themeData = Theme.of(context);
+
+    return ListView(
+      children: <Widget>[
+        ListTile(
+          leading: Icon(Icons.color_lens_outlined),
+          title: Text('Farbtest'),
+          onTap: () {
+            Navigator.push(
+              context,
+              MaterialPageRoute(
+                builder: (context) => ColorPreviewPage(),
+              ),
+            );
+          },
+        ),
+      ],
+    );
+  }
+}
+
+class ColorPreviewPage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final themeData = Theme.of(context);
+    final colorScheme = themeData.colorScheme;
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Farbtest'),
+      ),
+      body: ListView(
+        children: <Widget>[
+          for (var entry in [
+            'Primary',
+            'Primary Variant',
+            'Secondary',
+            'Secondary Variant',
+            'Background',
+            'Surface',
+            'Error',
+            'On Primary',
+            'On Secondary',
+            'On Background',
+            'On Surface',
+            'On Error',
+          ])
+            ColorItem(name: entry, color: _getColor(colorScheme, entry)),
+        ],
+      ),
+    );
+  }
+
+  Color _getColor(ColorScheme colorScheme, String name) {
+    switch (name) {
+      case 'Primary':
+        return colorScheme.primary;
+      case 'Primary Variant':
+        return colorScheme.primaryVariant;
+      case 'Secondary':
+        return colorScheme.secondary;
+      case 'Secondary Variant':
+        return colorScheme.secondaryVariant;
+      case 'Background':
+        return colorScheme.background;
+      case 'Surface':
+        return colorScheme.surface;
+      case 'Error':
+        return colorScheme.error;
+      case 'On Primary':
+        return colorScheme.onPrimary;
+      case 'On Secondary':
+        return colorScheme.onSecondary;
+      case 'On Background':
+        return colorScheme.onBackground;
+      case 'On Surface':
+        return colorScheme.onSurface;
+      case 'On Error':
+        return colorScheme.onError;
+      default:
+        return Colors.transparent;
+    }
+  }
+}
+
+class ColorItem extends StatelessWidget {
+  final String name;
+  final Color color;
+
+  const ColorItem({Key? key, required this.name, required this.color})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final themeData = Theme.of(context);
+
+    return Container(
+      padding: EdgeInsets.all(16.0),
+      color: color,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: <Widget>[
+          Text(
+            name,
+            style: TextStyle(
+              color: themeData.brightness == Brightness.light
+                  ? Colors.black
+                  : Colors.white,
+            ),
+          ),
+          Text(
+            '#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}',
+            style: TextStyle(
+              color: themeData.brightness == Brightness.light
+                  ? Colors.black
+                  : Colors.white,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/screen/pages/more/overhang.dart

@@ -5,6 +5,7 @@ import 'package:marianum_mobile/screen/settings/settings.dart';
 import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
 
 import '../../../widget/ListItem.dart';
+import 'debug/ThemeColors.dart';
 import 'message/message.dart';
 
 class Overhang extends StatelessWidget {
@@ -20,11 +21,12 @@ class Overhang extends StatelessWidget {
         ],
       ),
       body: ListView(
-        children: const [
+        children: [
           ListItemNavigator(icon: Icons.newspaper, text: "Marianum Message", target: Message()),
           ListItemNavigator(icon: Icons.room, text: "Raumplan", target: Roomplan()),
           ListItemNavigator(icon: Icons.calendar_month, text: "Schulferien", target: Roomplan()),
-          ListItemNavigator(icon: Icons.calculate, text: "Notendurschnitts rechner", target: Roomplan())
+          ListItemNavigator(icon: Icons.calculate, text: "Notendurschnitts rechner", target: Roomplan()),
+          ListItemNavigator(icon: Icons.color_lens_outlined, text: "Farbtest", target: ColorPreviewPage())
         ],
       ),
     );

lib/screen/pages/talk/chatBubble.dart

@@ -5,6 +5,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:jiffy/jiffy.dart';
+import 'package:marianum_mobile/data/appTheme.dart';
 
 import '../../../api/marianumcloud/talk/chat/getChatResponse.dart';
 import '../../../api/marianumcloud/talk/room/getRoomResponse.dart';
@@ -30,18 +31,26 @@ class ChatBubble extends StatefulWidget {
 }
 
 class _ChatBubbleState extends State<ChatBubble> {
-  static const styleSystem = BubbleStyle(
+  // late BubbleStyle styleSystem;
-    color: Color(0xffd4eaf4),
+  // late BubbleStyle Function(bool) styleRemote;
-    borderWidth: 1,
+  // late BubbleStyle Function(bool) styleSelf;
-    elevation: 2,
-    margin: BubbleEdges.only(bottom: 20, top: 10),
-    alignment: Alignment.center,
-  );
 
-  static BubbleStyle getStyleOther(bool seamless) {
+
+  BubbleStyle getSystemStyle() {
+    return BubbleStyle(
+      color: AppTheme.isDarkMode(context) ? Color(0xff182229) : Colors.white,
+      borderWidth: 1,
+      elevation: 2,
+      margin: const BubbleEdges.only(bottom: 20, top: 10),
+      alignment: Alignment.center,
+    );
+  }
+
+  BubbleStyle getRemoteStyle(bool seamless) {
+    var color = AppTheme.isDarkMode(context) ? Color(0xff202c33) : Colors.white;
     return BubbleStyle(
       nip: BubbleNip.leftTop,
-      color: seamless ? Colors.transparent : Colors.white,
+      color: seamless ? Colors.transparent : color,
       borderWidth: seamless ? 0 : 1,
       elevation: seamless ? 0 : 1,
       margin: const BubbleEdges.only(bottom: 10, left: 10, right: 50),
@@ -49,10 +58,10 @@ class _ChatBubbleState extends State<ChatBubble> {
     );
   }
 
-  static BubbleStyle getStyleSelf(bool seamless) {
+  BubbleStyle getSelfStyle(bool seamless) {
     return BubbleStyle(
       nip: BubbleNip.rightBottom,
-      color: seamless ? Colors.transparent : const Color(0xffd9fdd3),
+      color: seamless ? Colors.transparent : Color(0xff005c4b),
       borderWidth: seamless ? 0 : 1,
       elevation: seamless ? 0 : 1,
       margin: const BubbleEdges.only(bottom: 10, right: 10, left: 50),
@@ -76,12 +85,12 @@ class _ChatBubbleState extends State<ChatBubble> {
   BubbleStyle getStyle() {
     if(widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment) {
       if(widget.isSender) {
-        return getStyleSelf(message.containsFile);
+        return getSelfStyle(message.containsFile);
       } else {
-        return getStyleOther(message.containsFile);
+        return getRemoteStyle(message.containsFile);
       }
     } else {
-      return styleSystem;
+      return getSystemStyle();
     }
   }
 

lib/screen/pages/talk/chatTextfield.dart

@@ -56,7 +56,7 @@ class _ChatTextfieldState extends State<ChatTextfield> {
             padding: const EdgeInsets.only(left: 10, bottom: 10, top: 10),
             height: 60,
             width: double.infinity,
-            color: Colors.white,
+            color: Theme.of(context).colorScheme.secondary,
             child: Row(
               children: <Widget>[
                 GestureDetector(
@@ -108,9 +108,9 @@ class _ChatTextfieldState extends State<ChatTextfield> {
                     controller: _textBoxController,
                     readOnly: sending,
                     maxLines: 10,
-                    decoration: const InputDecoration(
+                    decoration: InputDecoration(
                         hintText: "Nachricht schreiben...",
-                        hintStyle: TextStyle(color: Colors.black54),
+                        hintStyle: TextStyle(color: Theme.of(context).colorScheme.onSecondary),
                         border: InputBorder.none
                     ),
                   ),

lib/screen/pages/talk/chatView.dart

@@ -4,6 +4,7 @@ import 'package:jiffy/jiffy.dart';
 import 'package:loader_overlay/loader_overlay.dart';
 import 'package:marianum_mobile/api/marianumcloud/talk/chat/getChatResponse.dart';
 import 'package:marianum_mobile/api/marianumcloud/talk/room/getRoomResponse.dart';
+import 'package:marianum_mobile/data/appTheme.dart';
 import 'package:marianum_mobile/data/chatList/chatProps.dart';
 import 'package:marianum_mobile/screen/pages/talk/chatBubble.dart';
 import 'package:marianum_mobile/screen/pages/talk/chatTextfield.dart';
@@ -84,13 +85,13 @@ class _ChatViewState extends State<ChatView> {
             ),
           ),
           body: Container(
-            decoration: const BoxDecoration(
+            decoration: BoxDecoration(
               image: DecorationImage(
-                image: AssetImage("assets/background/chat.png"),
+                image: AppTheme.isDarkMode(context) ? const AssetImage("assets/background/chatDark.png") : const AssetImage("assets/background/chat.png"),
                 scale: 1.5,
                 opacity: 0.5,
                 repeat: ImageRepeat.repeat,
-                colorFilter: ColorFilter.linearToSrgbGamma()
+                colorFilter: const ColorFilter.linearToSrgbGamma()
               )
             ),
             child: LoaderOverlay(

lib/theming/darkAppTheme.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class DarkAppTheme {
+  static const Color marianumRed = Color.fromARGB(255, 153, 51, 51);
+
+  static final theme = ThemeData(
+    brightness: Brightness.dark,
+    primaryColor: marianumRed,
+    hintColor: marianumRed,
+    colorScheme: const ColorScheme(
+      brightness: Brightness.dark,
+
+      surface: Colors.black,
+      onSurface: Colors.white,
+
+      primary: Colors.black,
+      onPrimary: Colors.white,
+
+      secondary: Colors.grey,
+      onSecondary: Colors.white,
+
+      background: Colors.black26,
+      onBackground: Colors.white,
+
+      error: marianumRed,
+      onError: marianumRed,
+    ),
+    inputDecorationTheme: const InputDecorationTheme(
+      border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)),
+    ),
+    appBarTheme: const AppBarTheme(
+      backgroundColor: marianumRed,
+    ),
+    progressIndicatorTheme: const ProgressIndicatorThemeData(
+      color: marianumRed,
+    ),
+
+  );
+}

lib/theming/lightAppTheme.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class LightAppTheme {
+  static const Color marianumRed = Color.fromARGB(255, 153, 51, 51);
+
+  static final theme = ThemeData(
+    brightness: Brightness.light,
+    primaryColor: marianumRed,
+
+    colorScheme: const ColorScheme(
+      brightness: Brightness.light,
+
+      surface: Colors.white,
+      onSurface: Colors.black,
+
+      secondary: Colors.grey,
+      onSecondary: Colors.white,
+
+      primary: marianumRed,
+      onPrimary: Colors.white,
+
+      background: Colors.white,
+      onBackground: Colors.black,
+
+      error: marianumRed,
+      onError: marianumRed,
+    ),
+    inputDecorationTheme: const InputDecorationTheme(
+      border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)),
+    ),
+    appBarTheme: const AppBarTheme(
+      backgroundColor: marianumRed,
+    ),
+    progressIndicatorTheme: const ProgressIndicatorThemeData(
+      color: marianumRed,
+    ),
+
+  );
+}