feat: Make the main color editable for users

lib/config/app_config.dart

@@ -1,5 +1,7 @@
 import 'dart:ui';
 
+import 'package:matrix/matrix.dart';
+
 abstract class AppConfig {
   static String _applicationName = 'FluffyChat';
   static String get applicationName => _applicationName;
@@ -9,6 +11,7 @@ abstract class AppConfig {
   static String get defaultHomeserver => _defaultHomeserver;
   static String jitsiInstance = 'https://meet.jit.si/';
   static double fontSizeFactor = 1;
+  static Color chatColor = primaryColor;
   static const double messageFontSize = 15.75;
   static const bool allowOtherHomeservers = true;
   static const bool enableRegistration = true;
@@ -54,6 +57,15 @@ abstract class AppConfig {
   static const double columnWidth = 360.0;
 
   static void loadFromJson(Map<String, dynamic> json) {
+    if (json['chat_color'] != null) {
+      try {
+        chatColor = Color(json['application_name']);
+      } catch (e) {
+        Logs().w(
+            'Invalid color in config.json! Please make sure to define the color in this format: "0xffdd0000"',
+            e);
+      }
+    }
     if (json['application_name'] is String) {
       _applicationName = json['application_name'];
     }

lib/config/setting_keys.dart

@@ -4,6 +4,7 @@ abstract class SettingKeys {
   static const String renderHtml = 'chat.fluffy.renderHtml';
   static const String hideRedactedEvents = 'chat.fluffy.hideRedactedEvents';
   static const String hideUnknownEvents = 'chat.fluffy.hideUnknownEvents';
+  static const String chatColor = 'chat.fluffy.chat_color';
   static const String sentry = 'sentry';
   static const String theme = 'theme';
   static const String amoledEnabled = 'amoled_enabled';

lib/config/themes.dart

@@ -31,177 +31,179 @@ abstract class FluffyThemes {
           subtitle2: fallbackTextStyle)
       : const TextTheme();
 
-  static ThemeData light = ThemeData(
+  static ThemeData get light => ThemeData(
-    visualDensity: VisualDensity.standard,
+        visualDensity: VisualDensity.standard,
-    primaryColorDark: Colors.white,
+        primaryColorDark: Colors.white,
-    primaryColorLight: const Color(0xff121212),
+        primaryColorLight: const Color(0xff121212),
-    brightness: Brightness.light,
+        brightness: Brightness.light,
-    primaryColor: AppConfig.primaryColor,
+        primaryColor: AppConfig.chatColor,
-    colorScheme: ThemeData.light().colorScheme.copyWith(
+        colorScheme: ThemeData.light().colorScheme.copyWith(
-          primary: AppConfig.primaryColor,
+              primary: AppConfig.chatColor,
-          secondary: AppConfig.primaryColor,
+              secondary: AppConfig.chatColor,
-          secondaryVariant: AppConfig.secondaryColor,
+              secondaryVariant: AppConfig.secondaryColor,
+            ),
+        backgroundColor: Colors.white,
+        secondaryHeaderColor: Colors.blueGrey.shade50,
+        scaffoldBackgroundColor: Colors.white,
+        textTheme: Typography.material2018().black.merge(fallbackTextTheme),
+        snackBarTheme:
+            const SnackBarThemeData(behavior: SnackBarBehavior.floating),
+        pageTransitionsTheme: const PageTransitionsTheme(
+          builders: {
+            TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(),
+            TargetPlatform.android: ZoomPageTransitionsBuilder(),
+            TargetPlatform.linux: CupertinoPageTransitionsBuilder(),
+            TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
+            TargetPlatform.windows: CupertinoPageTransitionsBuilder(),
+            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
+          },
         ),
-    backgroundColor: Colors.white,
+        dialogTheme: DialogTheme(
-    secondaryHeaderColor: const Color(0xffeeeffe),
+          shape: RoundedRectangleBorder(
-    scaffoldBackgroundColor: Colors.white,
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-    textTheme: Typography.material2018().black.merge(fallbackTextTheme),
+          ),
-    snackBarTheme: const SnackBarThemeData(behavior: SnackBarBehavior.floating),
-    pageTransitionsTheme: const PageTransitionsTheme(
-      builders: {
-        TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(),
-        TargetPlatform.android: ZoomPageTransitionsBuilder(),
-        TargetPlatform.linux: CupertinoPageTransitionsBuilder(),
-        TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
-        TargetPlatform.windows: CupertinoPageTransitionsBuilder(),
-        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
-      },
-    ),
-    dialogTheme: DialogTheme(
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      ),
-    ),
-    popupMenuTheme: PopupMenuThemeData(
-      elevation: 4,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      ),
-    ),
-    floatingActionButtonTheme: const FloatingActionButtonThemeData(
-      backgroundColor: AppConfig.primaryColor,
-      foregroundColor: Colors.white,
-    ),
-    elevatedButtonTheme: ElevatedButtonThemeData(
-      style: ElevatedButton.styleFrom(
-        primary: AppConfig.primaryColor,
-        onPrimary: Colors.white,
-        elevation: 6,
-        shadowColor: const Color(0x44000000),
-        minimumSize: const Size.fromHeight(48),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(AppConfig.borderRadius),
         ),
-        padding: const EdgeInsets.all(12),
+        popupMenuTheme: PopupMenuThemeData(
-      ),
+          elevation: 4,
-    ),
+          shape: RoundedRectangleBorder(
-    cardTheme: CardTheme(
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      elevation: 6,
+          ),
-      shadowColor: const Color(0x44000000),
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      ),
-      clipBehavior: Clip.hardEdge,
-    ),
-    inputDecorationTheme: InputDecorationTheme(
-      border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
-      enabledBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-        borderSide: BorderSide(
-          color: lighten(AppConfig.primaryColor, .51),
         ),
-      ),
+        floatingActionButtonTheme: FloatingActionButtonThemeData(
-      filled: true,
+          backgroundColor: AppConfig.chatColor,
-      fillColor: lighten(AppConfig.primaryColor, .51),
+          foregroundColor: Colors.white,
-    ),
+        ),
-    appBarTheme: const AppBarTheme(
+        elevatedButtonTheme: ElevatedButtonThemeData(
-      elevation: 6,
+          style: ElevatedButton.styleFrom(
-      shadowColor: Color(0x44000000),
+            primary: AppConfig.chatColor,
-      systemOverlayStyle: SystemUiOverlayStyle.dark,
+            onPrimary: Colors.white,
-      backgroundColor: Colors.white,
+            elevation: 6,
-      titleTextStyle: TextStyle(
+            shadowColor: const Color(0x44000000),
-        color: Colors.black,
+            minimumSize: const Size.fromHeight(48),
-        fontSize: 20,
+            shape: RoundedRectangleBorder(
-      ),
+              borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      iconTheme: IconThemeData(color: Colors.black),
+            ),
-    ),
+            padding: const EdgeInsets.all(12),
-  );
+          ),
+        ),
+        cardTheme: CardTheme(
+          elevation: 6,
+          shadowColor: const Color(0x44000000),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+          ),
+          clipBehavior: Clip.hardEdge,
+        ),
+        inputDecorationTheme: InputDecorationTheme(
+          border: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
+          enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+            borderSide: BorderSide(
+              color: lighten(AppConfig.chatColor, .51),
+            ),
+          ),
+          filled: true,
+          fillColor: lighten(AppConfig.chatColor, .51),
+        ),
+        appBarTheme: const AppBarTheme(
+          elevation: 6,
+          shadowColor: Color(0x44000000),
+          systemOverlayStyle: SystemUiOverlayStyle.dark,
+          backgroundColor: Colors.white,
+          titleTextStyle: TextStyle(
+            color: Colors.black,
+            fontSize: 20,
+          ),
+          iconTheme: IconThemeData(color: Colors.black),
+        ),
+      );
 
-  static ThemeData dark = ThemeData.dark().copyWith(
+  static ThemeData get dark => ThemeData.dark().copyWith(
-    visualDensity: VisualDensity.standard,
+        visualDensity: VisualDensity.standard,
-    primaryColorDark: const Color(0xff121212),
+        primaryColorDark: const Color(0xff121212),
-    primaryColorLight: Colors.white,
+        primaryColorLight: Colors.white,
-    primaryColor: AppConfig.primaryColor,
+        primaryColor: AppConfig.chatColor,
-    errorColor: const Color(0xFFCF6679),
+        errorColor: const Color(0xFFCF6679),
-    backgroundColor: Colors.black,
+        backgroundColor: Colors.black,
-    scaffoldBackgroundColor: Colors.black,
+        scaffoldBackgroundColor: Colors.black,
-    colorScheme: ThemeData.dark().colorScheme.copyWith(
+        colorScheme: ThemeData.dark().colorScheme.copyWith(
-          primary: AppConfig.primaryColorLight,
+              primary: AppConfig.primaryColorLight,
-          secondary: AppConfig.primaryColorLight,
+              secondary: AppConfig.primaryColorLight,
-          secondaryVariant: AppConfig.secondaryColor,
+              secondaryVariant: AppConfig.secondaryColor,
+            ),
+        secondaryHeaderColor: Colors.blueGrey.shade900,
+        textTheme: Typography.material2018().white.merge(fallbackTextTheme),
+        dialogTheme: DialogTheme(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+          ),
         ),
-    secondaryHeaderColor: const Color(0xff232543),
+        popupMenuTheme: PopupMenuThemeData(
-    textTheme: Typography.material2018().white.merge(fallbackTextTheme),
+          shape: RoundedRectangleBorder(
-    dialogTheme: DialogTheme(
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      shape: RoundedRectangleBorder(
+          ),
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      ),
-    ),
-    popupMenuTheme: PopupMenuThemeData(
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      ),
-    ),
-    cardTheme: CardTheme(
-      elevation: 7,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-      ),
-      clipBehavior: Clip.hardEdge,
-    ),
-    pageTransitionsTheme: const PageTransitionsTheme(
-      builders: {
-        TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(),
-        TargetPlatform.android: ZoomPageTransitionsBuilder(),
-        TargetPlatform.linux: CupertinoPageTransitionsBuilder(),
-        TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
-        TargetPlatform.windows: CupertinoPageTransitionsBuilder(),
-        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
-      },
-    ),
-    floatingActionButtonTheme: const FloatingActionButtonThemeData(
-      backgroundColor: AppConfig.primaryColor,
-      foregroundColor: Colors.white,
-    ),
-    inputDecorationTheme: InputDecorationTheme(
-      border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
-      filled: true,
-      fillColor: FluffyThemes.darken(AppConfig.primaryColorLight, .71),
-      enabledBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-        borderSide: BorderSide(
-          color: FluffyThemes.darken(AppConfig.primaryColor, .31),
         ),
-      ),
+        cardTheme: CardTheme(
-    ),
+          elevation: 7,
-    elevatedButtonTheme: ElevatedButtonThemeData(
+          shape: RoundedRectangleBorder(
-      style: ElevatedButton.styleFrom(
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-        primary: AppConfig.primaryColor,
+          ),
-        onPrimary: Colors.white,
+          clipBehavior: Clip.hardEdge,
-        minimumSize: const Size.fromHeight(48),
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(AppConfig.borderRadius),
         ),
-        padding: const EdgeInsets.all(12),
+        pageTransitionsTheme: const PageTransitionsTheme(
-      ),
+          builders: {
-    ),
+            TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(),
-    snackBarTheme: const SnackBarThemeData(behavior: SnackBarBehavior.floating),
+            TargetPlatform.android: ZoomPageTransitionsBuilder(),
-    appBarTheme: const AppBarTheme(
+            TargetPlatform.linux: CupertinoPageTransitionsBuilder(),
-      elevation: 6,
+            TargetPlatform.macOS: CupertinoPageTransitionsBuilder(),
-      systemOverlayStyle: SystemUiOverlayStyle.light,
+            TargetPlatform.windows: CupertinoPageTransitionsBuilder(),
-      backgroundColor: Color(0xff1D1D1D),
+            TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
-      titleTextStyle: TextStyle(
+          },
-        color: Colors.white,
+        ),
-        fontSize: 20,
+        floatingActionButtonTheme: FloatingActionButtonThemeData(
-      ),
+          backgroundColor: AppConfig.chatColor,
-      iconTheme: IconThemeData(color: Colors.white),
+          foregroundColor: Colors.white,
-    ),
+        ),
-    cupertinoOverrideTheme: const CupertinoThemeData(
+        inputDecorationTheme: InputDecorationTheme(
-      textTheme: CupertinoTextThemeData(),
+          border: OutlineInputBorder(
-    ),
+              borderRadius: BorderRadius.circular(AppConfig.borderRadius)),
-  );
+          filled: true,
+          fillColor: FluffyThemes.darken(AppConfig.primaryColorLight, .71),
+          enabledBorder: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+            borderSide: BorderSide(
+              color: FluffyThemes.darken(AppConfig.chatColor, .31),
+            ),
+          ),
+        ),
+        elevatedButtonTheme: ElevatedButtonThemeData(
+          style: ElevatedButton.styleFrom(
+            primary: AppConfig.chatColor,
+            onPrimary: Colors.white,
+            minimumSize: const Size.fromHeight(48),
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(AppConfig.borderRadius),
+            ),
+            padding: const EdgeInsets.all(12),
+          ),
+        ),
+        snackBarTheme:
+            const SnackBarThemeData(behavior: SnackBarBehavior.floating),
+        appBarTheme: const AppBarTheme(
+          elevation: 6,
+          systemOverlayStyle: SystemUiOverlayStyle.light,
+          backgroundColor: Color(0xff1D1D1D),
+          titleTextStyle: TextStyle(
+            color: Colors.white,
+            fontSize: 20,
+          ),
+          iconTheme: IconThemeData(color: Colors.white),
+        ),
+        cupertinoOverrideTheme: const CupertinoThemeData(
+          textTheme: CupertinoTextThemeData(),
+        ),
+      );
 
   static Color blackWhiteColor(BuildContext context) =>
       Theme.of(context).brightness == Brightness.light

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,
                     ),

lib/widgets/matrix.dart

@@ -5,6 +5,7 @@ import 'dart:io';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
+import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:desktop_notifications/desktop_notifications.dart';
 import 'package:flutter_app_lock/flutter_app_lock.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -17,6 +18,7 @@ import 'package:universal_html/html.dart' as html;
 import 'package:url_launcher/url_launcher.dart';
 import 'package:vrouter/vrouter.dart';
 
+import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/utils/client_manager.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions.dart/matrix_locals.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
@@ -477,6 +479,16 @@ class MatrixState extends State<Matrix> with WidgetsBindingObserver {
       store
           .getItemBool(SettingKeys.sendOnEnter, AppConfig.sendOnEnter)
           .then((value) => AppConfig.sendOnEnter = value);
+      store.getItem(SettingKeys.chatColor).then((value) {
+        if (value != null && int.tryParse(value) != null) {
+          AppConfig.chatColor = Color(int.parse(value));
+          AdaptiveTheme.of(context).setTheme(
+            light: FluffyThemes.light,
+            dark: FluffyThemes.dark,
+            isDefault: true,
+          );
+        }
+      });
     }
   }