feat: Initial material you support

lib/pages/chat/chat_view.dart

@@ -194,13 +194,8 @@ class ChatView extends StatelessWidget {
                         padding: const EdgeInsets.only(bottom: 56.0),
                         child: FloatingActionButton(
                           onPressed: controller.scrollDown,
-                          foregroundColor:
-                              Theme.of(context).textTheme.bodyText2!.color,
-                          backgroundColor:
-                              Theme.of(context).scaffoldBackgroundColor,
                           mini: true,
-                          child: Icon(Icons.arrow_downward_outlined,
-                              color: Theme.of(context).primaryColor),
+                          child: const Icon(Icons.arrow_downward_outlined),
                         ),
                       )
                     : null,

lib/pages/chat/events/message.dart

@@ -65,7 +65,7 @@ class Message extends StatelessWidget {
     final client = Matrix.of(context).client;
     final ownMessage = event.senderId == client.userID;
     final alignment = ownMessage ? Alignment.topRight : Alignment.topLeft;
-    var color = Theme.of(context).appBarTheme.backgroundColor;
+    var color = Theme.of(context).scaffoldBackgroundColor;
     final displayTime = event.type == EventTypes.RoomCreate ||
         nextEvent == null ||
         !event.originServerTs.sameEnvironment(nextEvent!.originServerTs);
@@ -78,10 +78,8 @@ class Message extends StatelessWidget {
         ? nextEvent!.sender.id == event.sender.id && !displayTime
         : false;
     final textColor = ownMessage
-        ? Colors.white
-        : Theme.of(context).brightness == Brightness.dark
-            ? Colors.white
-            : Colors.black;
+        ? Theme.of(context).colorScheme.onPrimary
+        : Theme.of(context).colorScheme.onBackground;
     final rowMainAxisAlignment =
         ownMessage ? MainAxisAlignment.end : MainAxisAlignment.start;
 
@@ -105,7 +103,7 @@ class Message extends StatelessWidget {
     if (ownMessage) {
       color = displayEvent.status.isError
           ? Colors.redAccent
-          : Theme.of(context).primaryColor;
+          : Theme.of(context).colorScheme.primary;
     }
 
     final rowChildren = <Widget>[

lib/pages/chat_details/chat_details_view.dart

@@ -74,13 +74,9 @@ class ChatDetailsView extends StatelessWidget {
                     ChatSettingsPopupMenu(room, false)
                   ],
                   title: Text(
-                      room.getLocalizedDisplayname(
-                          MatrixLocals(L10n.of(context)!)),
-                      style: TextStyle(
-                          color: Theme.of(context)
-                              .appBarTheme
-                              .titleTextStyle!
-                              .color)),
+                    room.getLocalizedDisplayname(
+                        MatrixLocals(L10n.of(context)!)),
+                  ),
                   backgroundColor:
                       Theme.of(context).appBarTheme.backgroundColor,
                   flexibleSpace: FlexibleSpaceBar(

lib/pages/chat_list/stories_header.dart

@@ -253,9 +253,6 @@ class _StoryButton extends StatelessWidget {
                             height: 24,
                             child: FloatingActionButton.small(
                               heroTag: null,
-                              backgroundColor:
-                                  Theme.of(context).backgroundColor,
-                              foregroundColor: Theme.of(context).primaryColor,
                               onPressed: () =>
                                   VRouter.of(context).to('/stories/create'),
                               child: const Icon(
@@ -269,7 +266,7 @@ class _StoryButton extends StatelessWidget {
                   ),
                 ),
               ),
-              const SizedBox(height: 8),
+              const Spacer(),
               Text(
                 profile.displayName ?? '',
                 maxLines: 1,
@@ -279,7 +276,7 @@ class _StoryButton extends StatelessWidget {
                   fontWeight: unread ? FontWeight.bold : null,
                 ),
               ),
-              const SizedBox(height: 8),
+              const Spacer(),
             ],
           ),
         ),

lib/pages/settings_style/settings_style.dart

@@ -37,12 +37,12 @@ class SettingsStyleController extends State<SettingsStyle> {
     setState(() {});
   }
 
-  void setChatColor(Color color) async {
+  void setChatColor(Color? color) async {
     await Matrix.of(context).store.setItem(
           SettingKeys.chatColor,
-          color.value.toString(),
+          color?.value.toString(),
         );
-    AppConfig.chatColor = color;
+    AppConfig.colorSchemeSeed = color;
     AdaptiveTheme.of(context).setTheme(
       light: FluffyThemes.light,
       dark: FluffyThemes.dark,
@@ -51,13 +51,14 @@ class SettingsStyleController extends State<SettingsStyle> {
 
   AdaptiveThemeMode? currentTheme;
 
-  static final List<Color> customColors = [
+  static final List<Color?> customColors = [
     AppConfig.primaryColor,
     Colors.blue.shade800,
     Colors.green.shade800,
-    Colors.orange.shade900,
+    Colors.orange.shade700,
     Colors.pink.shade700,
     Colors.blueGrey.shade600,
+    null,
   ];
 
   void switchTheme(AdaptiveThemeMode? newTheme) {

lib/pages/settings_style/settings_style_view.dart

@@ -23,38 +23,61 @@ class SettingsStyleView extends StatelessWidget {
         leading: const BackButton(),
         title: Text(L10n.of(context)!.changeTheme),
       ),
+      backgroundColor: Theme.of(context).colorScheme.surface,
       body: MaxWidthBody(
         withScrolling: true,
         child: Column(
           children: [
-            Row(
-              children: SettingsStyleController.customColors
-                  .map(
-                    (color) => Padding(
-                      padding: const EdgeInsets.all(12.0),
-                      child: InkWell(
-                        borderRadius: BorderRadius.circular(colorPickerSize),
-                        onTap: () => controller.setChatColor(color),
-                        child: Material(
-                          color: color,
-                          elevation: 6,
+            SizedBox(
+              height: colorPickerSize + 24,
+              child: ListView(
+                shrinkWrap: true,
+                scrollDirection: Axis.horizontal,
+                children: SettingsStyleController.customColors
+                    .map(
+                      (color) => Padding(
+                        padding: const EdgeInsets.all(12.0),
+                        child: InkWell(
                           borderRadius: BorderRadius.circular(colorPickerSize),
-                          child: SizedBox(
-                              width: colorPickerSize,
-                              height: colorPickerSize,
-                              child: AppConfig.chatColor.value == color.value
-                                  ? const Center(
-                                      child: Icon(
-                                      Icons.check,
-                                      size: 16,
-                                      color: Colors.white,
-                                    ))
-                                  : null),
+                          onTap: () => controller.setChatColor(color),
+                          child: color == null
+                              ? Material(
+                                  elevation:
+                                      AppConfig.colorSchemeSeed?.value == null
+                                          ? 100
+                                          : 0,
+                                  shadowColor: AppConfig.colorSchemeSeed,
+                                  borderRadius:
+                                      BorderRadius.circular(colorPickerSize),
+                                  child: Image.asset(
+                                    'assets/colors.png',
+                                    width: colorPickerSize,
+                                    height: colorPickerSize,
+                                  ),
+                                )
+                              : Material(
+                                  color: color,
+                                  elevation: 6,
+                                  borderRadius:
+                                      BorderRadius.circular(colorPickerSize),
+                                  child: SizedBox(
+                                      width: colorPickerSize,
+                                      height: colorPickerSize,
+                                      child: AppConfig.colorSchemeSeed?.value ==
+                                              color.value
+                                          ? const Center(
+                                              child: Icon(
+                                              Icons.check,
+                                              size: 16,
+                                              color: Colors.white,
+                                            ))
+                                          : null),
+                                ),
                         ),
                       ),
-                    ),
-                  )
-                  .toList(),
+                    )
+                    .toList(),
+              ),
             ),
             const Divider(height: 1),
             RadioListTile<AdaptiveThemeMode>(
@@ -122,7 +145,7 @@ class SettingsStyleView extends StatelessWidget {
               alignment: Alignment.centerLeft,
               padding: const EdgeInsets.symmetric(horizontal: 12),
               child: Material(
-                color: Theme.of(context).primaryColor,
+                color: Theme.of(context).colorScheme.primary,
                 elevation: 6,
                 shadowColor:
                     Theme.of(context).secondaryHeaderColor.withAlpha(100),
@@ -132,7 +155,7 @@ class SettingsStyleView extends StatelessWidget {
                   child: Text(
                     'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor',
                     style: TextStyle(
-                      color: Colors.white,
+                      color: Theme.of(context).colorScheme.onPrimary,
                       fontSize:
                           AppConfig.messageFontSize * AppConfig.fontSizeFactor,
                     ),