theme: Replace streamMessageBgDefault with bgMessageRegular

The `streamMessageBgDefault` giving colors to the background of both Stream messages and DMs UI, has been changed to a darker version for the dark theme, using a new `bgMessageRegular` variable in the `MessageListTheme`, according to the Figma design. It's just a refactor of variable for the light theme. Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4993-20811&t=vu2wWOBiVb0BB6Vz-0 discussion: zulip#1213 (comment)
Gaurav-Kushwaha-1225 · Feb 22, 2025 · a976f27 · a976f27
1 parent 2be3842
commit a976f27
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -29,11 +29,11 @@ import 'theme.dart';
 /// Message-list styles that differ between light and dark themes.
 class MessageListTheme extends ThemeExtension<MessageListTheme> {
   static final light = MessageListTheme._(
+    bgMessageRegular: const HSLColor.fromAHSL(1, 0, 0, 1).toColor(),
     dateSeparator: Colors.black,
     dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
     labelTime: const HSLColor.fromAHSL(0.49, 0, 0, 0).toColor(),
     senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
-    streamMessageBgDefault: Colors.white,
     streamRecipientHeaderChevronRight: Colors.black.withValues(alpha: 0.3),
 
     // From the Figma mockup at:
@@ -51,11 +51,11 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   );
 
   static final dark = MessageListTheme._(
+    bgMessageRegular: const HSLColor.fromAHSL(1, 0, 0, 0.11).toColor(),
     dateSeparator: Colors.white,
     dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
     labelTime: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
     senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
-    streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
     streamRecipientHeaderChevronRight: Colors.white.withValues(alpha: 0.3),
 
     // 0.75 opacity from here:
@@ -72,11 +72,11 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   );
 
   MessageListTheme._({
+    required this.bgMessageRegular,
     required this.dateSeparator,
     required this.dmRecipientHeaderBg,
     required this.labelTime,
     required this.senderBotIcon,
-    required this.streamMessageBgDefault,
     required this.streamRecipientHeaderChevronRight,
     required this.unreadMarker,
     required this.unreadMarkerGap,
@@ -93,34 +93,34 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     return extension!;
   }
 
+  final Color bgMessageRegular;
   final Color dateSeparator;
   final Color dmRecipientHeaderBg;
   final Color labelTime;
   final Color senderBotIcon;
-  final Color streamMessageBgDefault;
   final Color streamRecipientHeaderChevronRight;
   final Color unreadMarker;
   final Color unreadMarkerGap;
   final Color unsubscribedStreamRecipientHeaderBg;
 
   @override
   MessageListTheme copyWith({
+    Color? bgMessageRegular,
     Color? dateSeparator,
     Color? dmRecipientHeaderBg,
     Color? labelTime,
     Color? senderBotIcon,
-    Color? streamMessageBgDefault,
     Color? streamRecipientHeaderChevronRight,
     Color? unreadMarker,
     Color? unreadMarkerGap,
     Color? unsubscribedStreamRecipientHeaderBg,
   }) {
     return MessageListTheme._(
+      bgMessageRegular: bgMessageRegular ?? this.bgMessageRegular,
       dateSeparator: dateSeparator ?? this.dateSeparator,
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
       labelTime: labelTime ?? this.labelTime,
       senderBotIcon: senderBotIcon ?? this.senderBotIcon,
-      streamMessageBgDefault: streamMessageBgDefault ?? this.streamMessageBgDefault,
       streamRecipientHeaderChevronRight: streamRecipientHeaderChevronRight ?? this.streamRecipientHeaderChevronRight,
       unreadMarker: unreadMarker ?? this.unreadMarker,
       unreadMarkerGap: unreadMarkerGap ?? this.unreadMarkerGap,
@@ -134,11 +134,11 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       return this;
     }
     return MessageListTheme._(
+      bgMessageRegular: Color.lerp(bgMessageRegular, other.bgMessageRegular, t)!,
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
       dmRecipientHeaderBg: Color.lerp(dmRecipientHeaderBg, other.dmRecipientHeaderBg, t)!,
       labelTime: Color.lerp(labelTime, other.labelTime, t)!,
       senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
-      streamMessageBgDefault: Color.lerp(streamMessageBgDefault, other.streamMessageBgDefault, t)!,
       streamRecipientHeaderChevronRight: Color.lerp(streamRecipientHeaderChevronRight, other.streamRecipientHeaderChevronRight, t)!,
       unreadMarker: Color.lerp(unreadMarker, other.unreadMarker, t)!,
       unreadMarkerGap: Color.lerp(unreadMarkerGap, other.unreadMarkerGap, t)!,
@@ -911,7 +911,7 @@ class DateSeparator extends StatelessWidget {
     final line = BorderSide(width: 0, color: messageListTheme.dateSeparator);
 
     // TODO(#681) use different color for DM messages
-    return ColoredBox(color: messageListTheme.streamMessageBgDefault,
+    return ColoredBox(color: messageListTheme.bgMessageRegular,
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 2),
         child: Row(children: [
@@ -958,7 +958,7 @@ class MessageItem extends StatelessWidget {
       child: _UnreadMarker(
         isRead: message.flags.contains(MessageFlag.read),
         child: ColoredBox(
-          color: messageListTheme.streamMessageBgDefault,
+          color: messageListTheme.bgMessageRegular,
           child: Column(children: [
             MessageWithPossibleSender(item: item),
             if (trailingWhitespace != null && item.isLastInBlock) SizedBox(height: trailingWhitespace!),

diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
@@ -252,17 +252,17 @@ void main() {
       return widget.color;
     }
 
-    check(backgroundColor()).isSameColorAs(MessageListTheme.light.streamMessageBgDefault);
+    check(backgroundColor()).isSameColorAs(MessageListTheme.light.bgMessageRegular);
 
     tester.platformDispatcher.platformBrightnessTestValue = Brightness.dark;
     await tester.pump();
 
     await tester.pump(kThemeAnimationDuration * 0.4);
     final expectedLerped = MessageListTheme.light.lerp(MessageListTheme.dark, 0.4);
-    check(backgroundColor()).isSameColorAs(expectedLerped.streamMessageBgDefault);
+    check(backgroundColor()).isSameColorAs(expectedLerped.bgMessageRegular);
 
     await tester.pump(kThemeAnimationDuration * 0.6);
-    check(backgroundColor()).isSameColorAs(MessageListTheme.dark.streamMessageBgDefault);
+    check(backgroundColor()).isSameColorAs(MessageListTheme.dark.bgMessageRegular);
   });
 
   group('fetch older messages on scroll', () {