diff --git a/lib/config/themes.dart b/lib/config/themes.dart index dbb557ae3..f6e28d5c5 100644 --- a/lib/config/themes.dart +++ b/lib/config/themes.dart @@ -147,3 +147,18 @@ extension on Brightness { Brightness get reversed => this == Brightness.dark ? Brightness.light : Brightness.dark; } + +extension BubbleColorTheme on ThemeData { + Color get bubbleColor => brightness == Brightness.light + ? colorScheme.primary + : colorScheme.primaryContainer; + Color get onBubbleColor => brightness == Brightness.light + ? colorScheme.onPrimary + : colorScheme.onPrimaryContainer; + + Color get secondaryBubbleColor => HSLColor.fromColor( + brightness == Brightness.light + ? colorScheme.tertiary + : colorScheme.tertiaryContainer, + ).withSaturation(0.75).toColor(); +} diff --git a/lib/pages/chat/chat_app_bar_title.dart b/lib/pages/chat/chat_app_bar_title.dart index a326340b5..3b840dbe4 100644 --- a/lib/pages/chat/chat_app_bar_title.dart +++ b/lib/pages/chat/chat_app_bar_title.dart @@ -20,7 +20,12 @@ class ChatAppBarTitle extends StatelessWidget { Widget build(BuildContext context) { final room = controller.room; if (controller.selectedEvents.isNotEmpty) { - return Text(controller.selectedEvents.length.toString()); + return Text( + controller.selectedEvents.length.toString(), + style: TextStyle( + color: Theme.of(context).secondaryBubbleColor, + ), + ); } return InkWell( hoverColor: Colors.transparent, diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart index 223b0797d..7a54a49d4 100644 --- a/lib/pages/chat/chat_event_list.dart +++ b/lib/pages/chat/chat_event_list.dart @@ -34,20 +34,10 @@ class ChatEventList extends StatelessWidget { final theme = Theme.of(context); - const saturation = 0.85; - final colors = theme.brightness == Brightness.light - ? [ - HSLColor.fromColor(theme.colorScheme.tertiary) - .withSaturation(saturation) - .toColor(), - theme.colorScheme.primary, - ] - : [ - HSLColor.fromColor(theme.colorScheme.tertiaryContainer) - .withSaturation(saturation) - .toColor(), - theme.colorScheme.primaryContainer, - ]; + final colors = [ + theme.secondaryBubbleColor, + theme.bubbleColor, + ]; final horizontalPadding = FluffyThemes.isColumnMode(context) ? 8.0 : 0.0; diff --git a/lib/pages/chat/chat_input_row.dart b/lib/pages/chat/chat_input_row.dart index 1cdb283b1..500afdee0 100644 --- a/lib/pages/chat/chat_input_row.dart +++ b/lib/pages/chat/chat_input_row.dart @@ -275,8 +275,8 @@ class ChatInputRow extends StatelessWidget { shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(height), ), - backgroundColor: theme.colorScheme.primary, - foregroundColor: theme.colorScheme.onPrimary, + backgroundColor: theme.bubbleColor, + foregroundColor: theme.onBubbleColor, child: const Icon(Icons.mic_none_outlined), ) : FloatingActionButton.small( @@ -287,8 +287,8 @@ class ChatInputRow extends StatelessWidget { shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(height), ), - backgroundColor: theme.colorScheme.onPrimaryContainer, - foregroundColor: theme.colorScheme.onPrimary, + backgroundColor: theme.bubbleColor, + foregroundColor: theme.onBubbleColor, child: const Icon(Icons.send_outlined), ), ), diff --git a/lib/pages/chat/chat_view.dart b/lib/pages/chat/chat_view.dart index ef7f52db7..59fbd9138 100644 --- a/lib/pages/chat/chat_view.dart +++ b/lib/pages/chat/chat_view.dart @@ -179,7 +179,7 @@ class ChatView extends StatelessWidget { actionsIconTheme: IconThemeData( color: controller.selectedEvents.isEmpty ? null - : theme.colorScheme.primary, + : theme.secondaryBubbleColor, ), automaticallyImplyLeading: false, leading: controller.selectMode @@ -187,7 +187,7 @@ class ChatView extends StatelessWidget { icon: const Icon(Icons.close), onPressed: controller.clearSelectedEvents, tooltip: L10n.of(context).close, - color: theme.colorScheme.primary, + color: theme.secondaryBubbleColor, ) : FluffyThemes.isColumnMode(context) ? null diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message.dart index 071b2deca..34018d8e7 100644 --- a/lib/pages/chat/events/message.dart +++ b/lib/pages/chat/events/message.dart @@ -113,11 +113,8 @@ class Message extends StatelessWidget { previousEvent!.senderId == event.senderId && previousEvent!.originServerTs.sameEnvironment(event.originServerTs); - final textColor = ownMessage - ? theme.brightness == Brightness.light - ? theme.colorScheme.onPrimary - : theme.colorScheme.onPrimaryContainer - : theme.colorScheme.onSurface; + final textColor = + ownMessage ? theme.onBubbleColor : theme.colorScheme.onSurface; final linkColor = ownMessage ? theme.brightness == Brightness.light @@ -157,11 +154,8 @@ class Message extends StatelessWidget { }.contains(event.messageType); if (ownMessage) { - color = displayEvent.status.isError - ? Colors.redAccent - : theme.brightness == Brightness.light - ? theme.colorScheme.primary - : theme.colorScheme.primaryContainer; + color = + displayEvent.status.isError ? Colors.redAccent : theme.bubbleColor; } final resetAnimateIn = this.resetAnimateIn; diff --git a/lib/pages/settings_style/settings_style_view.dart b/lib/pages/settings_style/settings_style_view.dart index d93e492fc..2309dbc3d 100644 --- a/lib/pages/settings_style/settings_style_view.dart +++ b/lib/pages/settings_style/settings_style_view.dart @@ -214,9 +214,7 @@ class SettingsStyleView extends StatelessWidget { ), child: DecoratedBox( decoration: BoxDecoration( - color: theme.brightness == Brightness.light - ? theme.colorScheme.primary - : theme.colorScheme.primaryContainer, + color: theme.bubbleColor, borderRadius: BorderRadius.circular( AppConfig.borderRadius, ), @@ -229,11 +227,7 @@ class SettingsStyleView extends StatelessWidget { child: Text( 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor', style: TextStyle( - color: - theme.brightness == Brightness.light - ? theme.colorScheme.onPrimary - : theme.colorScheme - .onPrimaryContainer, + color: theme.onBubbleColor, fontSize: AppConfig.messageFontSize * AppConfig.fontSizeFactor, ),