diff --git a/assets/colors.png b/assets/colors.png new file mode 100644 index 00000000..27c996ad Binary files /dev/null and b/assets/colors.png differ diff --git a/lib/config/app_config.dart b/lib/config/app_config.dart index b2b7283b..393abf51 100644 --- a/lib/config/app_config.dart +++ b/lib/config/app_config.dart @@ -11,7 +11,8 @@ abstract class AppConfig { static String get defaultHomeserver => _defaultHomeserver; static double bubbleSizeFactor = 1; static double fontSizeFactor = 1; - static Color chatColor = primaryColor; + static const Color chatColor = primaryColor; + static Color? colorSchemeSeed; static const double messageFontSize = 15.75; static const bool allowOtherHomeservers = true; static const bool enableRegistration = true; @@ -63,7 +64,7 @@ abstract class AppConfig { static void loadFromJson(Map json) { if (json['chat_color'] != null) { try { - chatColor = Color(json['application_name']); + colorSchemeSeed = Color(json['application_name']); } catch (e) { Logs().w( 'Invalid color in config.json! Please make sure to define the color in this format: "0xffdd0000"', diff --git a/lib/config/themes.dart b/lib/config/themes.dart index dcc707d9..989b2634 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -1,4 +1,3 @@ -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; @@ -23,6 +22,9 @@ abstract class FluffyThemes { Widget? prefixIcon, }) => InputDecoration( + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(AppConfig.borderRadius), + ), fillColor: Colors.white.withAlpha(200), labelText: labelText, hintText: hintText, @@ -74,17 +76,9 @@ abstract class FluffyThemes { static ThemeData get light => ThemeData( visualDensity: VisualDensity.standard, - primaryColorDark: Colors.white, - primaryColorLight: const Color(0xff121212), + useMaterial3: true, brightness: Brightness.light, - primaryColor: AppConfig.chatColor, - colorScheme: ThemeData.light().colorScheme.copyWith( - primary: AppConfig.chatColor, - secondary: AppConfig.chatColor, - surface: FluffyThemes.lighten(AppConfig.chatColor, 0.535), - ), - backgroundColor: Colors.white, - secondaryHeaderColor: Colors.blueGrey.shade50, + colorSchemeSeed: AppConfig.colorSchemeSeed, scaffoldBackgroundColor: Colors.white, textTheme: PlatformInfos.isDesktop ? Typography.material2018().black.merge(fallbackTextTheme) @@ -101,54 +95,23 @@ abstract class FluffyThemes { TargetPlatform.iOS: CupertinoPageTransitionsBuilder(), }, ), - dialogTheme: DialogTheme( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), - ), - ), - popupMenuTheme: PopupMenuThemeData( - elevation: 4, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), - ), - ), - floatingActionButtonTheme: FloatingActionButtonThemeData( - backgroundColor: AppConfig.chatColor, - foregroundColor: Colors.white, - ), + dividerColor: Colors.blueGrey.shade50, elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( - primary: AppConfig.chatColor, - onPrimary: Colors.white, textStyle: const TextStyle(fontSize: 16), elevation: 6, shadowColor: const Color(0x44000000), minimumSize: const Size.fromHeight(48), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), - ), padding: const EdgeInsets.all(12), ), ), - cardTheme: CardTheme( + cardTheme: const CardTheme( elevation: 6, - shadowColor: const Color(0x44000000), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), - ), + // shadowColor: Color(0x44000000), 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), - width: 1, - ), - ), + border: const UnderlineInputBorder(borderSide: BorderSide(width: 1)), filled: true, fillColor: Colors.blueGrey.shade50, ), @@ -156,49 +119,22 @@ abstract class FluffyThemes { elevation: 6, shadowColor: Color(0x44000000), systemOverlayStyle: SystemUiOverlayStyle.dark, + surfaceTintColor: Colors.white, backgroundColor: Colors.white, - titleTextStyle: TextStyle( - color: Colors.black, - fontSize: 20, - ), - iconTheme: IconThemeData(color: Colors.black), ), ); - static ThemeData get dark => ThemeData.dark().copyWith( + static ThemeData get dark => ThemeData( visualDensity: VisualDensity.standard, - primaryColorDark: const Color(0xff121212), - primaryColorLight: Colors.white, - primaryColor: AppConfig.chatColor, - errorColor: const Color(0xFFCF6679), - backgroundColor: Colors.black, + useMaterial3: true, + brightness: Brightness.dark, + colorSchemeSeed: AppConfig.colorSchemeSeed, scaffoldBackgroundColor: Colors.black, - colorScheme: ThemeData.dark().colorScheme.copyWith( - primary: FluffyThemes.lighten(AppConfig.chatColor, 0.33), - secondary: FluffyThemes.lighten(AppConfig.chatColor, 0.33), - surface: FluffyThemes.darken(AppConfig.chatColor, 0.35), - ), - secondaryHeaderColor: Colors.blueGrey.shade900, textTheme: PlatformInfos.isDesktop ? Typography.material2018().white.merge(fallbackTextTheme) : null, - dialogTheme: DialogTheme( - 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, - ), + snackBarTheme: + const SnackBarThemeData(behavior: SnackBarBehavior.floating), pageTransitionsTheme: const PageTransitionsTheme( builders: { TargetPlatform.fuchsia: ZoomPageTransitionsBuilder(), @@ -209,48 +145,19 @@ abstract class FluffyThemes { TargetPlatform.iOS: CupertinoPageTransitionsBuilder(), }, ), - floatingActionButtonTheme: FloatingActionButtonThemeData( - backgroundColor: AppConfig.chatColor, - foregroundColor: Colors.white, - ), - inputDecorationTheme: InputDecorationTheme( - border: OutlineInputBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius)), - filled: true, - fillColor: Colors.blueGrey.shade900, - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), - borderSide: BorderSide( - color: FluffyThemes.darken(AppConfig.chatColor, .31), - ), - ), - ), + dividerColor: Colors.blueGrey.shade600, elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( primary: AppConfig.chatColor, onPrimary: Colors.white, minimumSize: const Size.fromHeight(48), textStyle: const TextStyle(fontSize: 16), - 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(), ), ); diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index 9fe33328..ee32862b 100644 --- a/lib/pages/chat/chat_view.dart +++ b/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, diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart index 01cea0cb..ce074abd 100644 --- a/lib/pages/chat/events/message.dart +++ b/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 = [ diff --git a/lib/pages/chat_details/chat_details_view.dart b/lib/pages/chat_details/chat_details_view.dart index 3953e024..f457b5c8 100644 --- a/lib/pages/chat_details/chat_details_view.dart +++ b/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( diff --git a/lib/pages/chat_list/stories_header.dart b/lib/pages/chat_list/stories_header.dart index 53e2b8d6..81568327 100644 --- a/lib/pages/chat_list/stories_header.dart +++ b/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(), ], ), ), diff --git a/lib/pages/settings_style/settings_style.dart b/lib/pages/settings_style/settings_style.dart index 7df7565e..012039c9 100644 --- a/lib/pages/settings_style/settings_style.dart +++ b/lib/pages/settings_style/settings_style.dart @@ -37,12 +37,12 @@ class SettingsStyleController extends State { 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 { AdaptiveThemeMode? currentTheme; - static final List customColors = [ + static final List 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) { diff --git a/lib/pages/settings_style/settings_style_view.dart b/lib/pages/settings_style/settings_style_view.dart index f0867a1e..9514d5e6 100644 --- a/lib/pages/settings_style/settings_style_view.dart +++ b/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( @@ -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, ), diff --git a/lib/widgets/matrix.dart b/lib/widgets/matrix.dart index 1bb296b7..6b27fe78 100644 --- a/lib/widgets/matrix.dart +++ b/lib/widgets/matrix.dart @@ -502,7 +502,7 @@ class MatrixState extends State with WidgetsBindingObserver { .then((value) => AppConfig.experimentalVoip = value); store.getItem(SettingKeys.chatColor).then((value) { if (value != null && int.tryParse(value) != null) { - AppConfig.chatColor = Color(int.parse(value)); + AppConfig.colorSchemeSeed = Color(int.parse(value)); AdaptiveTheme.of(context).setTheme( light: FluffyThemes.light, dark: FluffyThemes.dark,