feat: Make the main color editable for users

lib/pages/chat/chat_view.dart

@@ -235,7 +235,7 @@ class ChatView extends StatelessWidget {
               : null,
           backgroundColor: Theme.of(context).brightness == Brightness.light
               ? FluffyThemes.lighten(Theme.of(context).primaryColor, 0.51)
-              : FluffyThemes.darken(Theme.of(context).primaryColor, 0.325),
+              : FluffyThemes.darken(Theme.of(context).primaryColor, 0.35),
           body: Stack(
             children: <Widget>[
               if (Matrix.of(context).wallpaper != null)

lib/pages/settings_style/settings_style.dart

@@ -7,6 +7,7 @@ import 'package:file_picker_cross/file_picker_cross.dart';
 
 import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/setting_keys.dart';
+import 'package:fluffychat/config/themes.dart';
 import '../../widgets/matrix.dart';
 import 'settings_style_view.dart';
 
@@ -35,8 +36,29 @@ class SettingsStyleController extends State<SettingsStyle> {
     setState(() => null);
   }
 
+  void setChatColor(Color color) async {
+    await Matrix.of(context).store.setItem(
+          SettingKeys.chatColor,
+          color.value.toString(),
+        );
+    AppConfig.chatColor = color;
+    AdaptiveTheme.of(context).setTheme(
+      light: FluffyThemes.light,
+      dark: FluffyThemes.dark,
+      isDefault: true,
+    );
+  }
+
   AdaptiveThemeMode currentTheme;
 
+  static List<Color> customColors = [
+    AppConfig.primaryColor,
+    Colors.blue.shade700,
+    Colors.green.shade700,
+    Colors.pink.shade700,
+    Colors.orange.shade700,
+  ];
+
   void switchTheme(AdaptiveThemeMode newTheme) {
     switch (newTheme) {
       case AdaptiveThemeMode.light:

lib/pages/settings_style/settings_style_view.dart

@@ -16,6 +16,7 @@ class SettingsStyleView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     controller.currentTheme ??= AdaptiveTheme.of(context).mode;
+    const colorPickerSize = 32.0;
     return Scaffold(
       appBar: AppBar(
         leading: const BackButton(),
@@ -25,6 +26,36 @@ class SettingsStyleView extends StatelessWidget {
         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,
+                          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),
+                        ),
+                      ),
+                    ),
+                  )
+                  .toList(),
+            ),
+            const Divider(height: 1),
             RadioListTile<AdaptiveThemeMode>(
               groupValue: controller.currentTheme,
               value: AdaptiveThemeMode.system,
@@ -86,8 +117,9 @@ class SettingsStyleView extends StatelessWidget {
             ),
             Container(
               alignment: Alignment.centerLeft,
+              padding: const EdgeInsets.symmetric(horizontal: 12),
               child: Material(
-                color: Theme.of(context).backgroundColor,
+                color: Theme.of(context).primaryColor,
                 elevation: 6,
                 shadowColor:
                     Theme.of(context).secondaryHeaderColor.withAlpha(100),
@@ -97,6 +129,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,
                       fontSize:
                           AppConfig.messageFontSize * AppConfig.fontSizeFactor,
                     ),