chore: Message bubble color follow up

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();
+}

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,

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;
 

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

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

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;

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