msglist: Use distinct background colors for DM messages.

This commit modifies DmMessage and its DateSeparator to use a different background color from StreamMessage. This matches the web app's behavior where DM messages have a distinct background color.

Added new theme colors to MessageListTheme(These colors match the web app version)

* Light theme: hsl(45deg 20% 96%)

* Dark theme: hsl(46deg 7% 16%)

Fixes zulip#681.

Author: E-m-i-n-e-n-c-e

lib/widgets/message_list.dart

@@ -36,6 +36,9 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.08, 0.65).toColor(),
     senderName: const HSLColor.fromAHSL(1, 0, 0, 0.2).toColor(),
     streamMessageBgDefault: Colors.white,
+    // Background color for DM messages in light theme.
+    // Matches web app's --color-background-private-message-content: hsl(45deg 20% 96%)
+    dmMessageBgDefault: const HSLColor.fromAHSL(1, 45, 0.20, 0.96).toColor(),
     streamRecipientHeaderChevronRight: Colors.black.withValues(alpha: 0.3),
 
     // From the Figma mockup at:
@@ -61,6 +64,9 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
     senderName: const HSLColor.fromAHSL(0.85, 0, 0, 1).toColor(),
     streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
+    // Background color for DM messages in dark theme.
+    // Matches web app's --color-background-private-message-content: hsl(46deg 7% 16%)
+    dmMessageBgDefault: const HSLColor.fromAHSL(1, 46, 0.07, 0.16).toColor(),
     streamRecipientHeaderChevronRight: Colors.white.withValues(alpha: 0.3),
 
     // 0.75 opacity from here:
@@ -85,6 +91,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     required this.senderBotIcon,
     required this.senderName,
     required this.streamMessageBgDefault,
+    required this.dmMessageBgDefault,
     required this.streamRecipientHeaderChevronRight,
     required this.unreadMarker,
     required this.unreadMarkerGap,
@@ -109,6 +116,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   final Color senderBotIcon;
   final Color senderName;
   final Color streamMessageBgDefault;
+  final Color dmMessageBgDefault;
   final Color streamRecipientHeaderChevronRight;
   final Color unreadMarker;
   final Color unreadMarkerGap;
@@ -124,6 +132,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     Color? senderBotIcon,
     Color? senderName,
     Color? streamMessageBgDefault,
+    Color? dmMessageBgDefault,
     Color? streamRecipientHeaderChevronRight,
     Color? unreadMarker,
     Color? unreadMarkerGap,
@@ -138,6 +147,7 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       senderBotIcon: senderBotIcon ?? this.senderBotIcon,
       senderName: senderName ?? this.senderName,
       streamMessageBgDefault: streamMessageBgDefault ?? this.streamMessageBgDefault,
+      dmMessageBgDefault: dmMessageBgDefault ?? this.dmMessageBgDefault,
       streamRecipientHeaderChevronRight: streamRecipientHeaderChevronRight ?? this.streamRecipientHeaderChevronRight,
       unreadMarker: unreadMarker ?? this.unreadMarker,
       unreadMarkerGap: unreadMarkerGap ?? this.unreadMarkerGap,
@@ -153,12 +163,13 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     return MessageListTheme._(
       dateSeparator: Color.lerp(dateSeparator, other.dateSeparator, t)!,
       dateSeparatorText: Color.lerp(dateSeparatorText, other.dateSeparatorText, t)!,
-      dmRecipientHeaderBg: Color.lerp(streamMessageBgDefault, other.dmRecipientHeaderBg, t)!,
+      dmRecipientHeaderBg: Color.lerp(dmRecipientHeaderBg, other.dmRecipientHeaderBg, t)!,
       messageTimestamp: Color.lerp(messageTimestamp, other.messageTimestamp, t)!,
       recipientHeaderText: Color.lerp(recipientHeaderText, other.recipientHeaderText, t)!,
       senderBotIcon: Color.lerp(senderBotIcon, other.senderBotIcon, t)!,
       senderName: Color.lerp(senderName, other.senderName, t)!,
       streamMessageBgDefault: Color.lerp(streamMessageBgDefault, other.streamMessageBgDefault, t)!,
+      dmMessageBgDefault: Color.lerp(dmMessageBgDefault, other.dmMessageBgDefault, t)!,
       streamRecipientHeaderChevronRight: Color.lerp(streamRecipientHeaderChevronRight, other.streamRecipientHeaderChevronRight, t)!,
       unreadMarker: Color.lerp(unreadMarker, other.unreadMarker, t)!,
       unreadMarkerGap: Color.lerp(unreadMarkerGap, other.unreadMarkerGap, t)!,
@@ -931,8 +942,14 @@ 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,
+    // Choose background color based on message type to maintain visual consistency
+    // DM messages and their date separators share the same distinct background
+    final backgroundColor = switch (message) {
+      StreamMessage() => messageListTheme.streamMessageBgDefault,
+      DmMessage() => messageListTheme.dmMessageBgDefault,
+    };
+
+    return ColoredBox(color: backgroundColor,
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 2),
         child: Row(children: [
@@ -973,13 +990,20 @@ class MessageItem extends StatelessWidget {
   Widget build(BuildContext context) {
     final message = item.message;
     final messageListTheme = MessageListTheme.of(context);
+
+    // Choose background color based on message type to maintain consistency
+    final backgroundColor = switch (message) {
+      StreamMessage() => messageListTheme.streamMessageBgDefault,
+      DmMessage() => messageListTheme.dmMessageBgDefault,
+    };
+
     return StickyHeaderItem(
       allowOverflow: !item.isLastInBlock,
       header: header,
       child: _UnreadMarker(
         isRead: message.flags.contains(MessageFlag.read),
         child: ColoredBox(
-          color: messageListTheme.streamMessageBgDefault,
+          color: backgroundColor,
           child: Column(children: [
             MessageWithPossibleSender(item: item),
             if (trailingWhitespace != null && item.isLastInBlock) SizedBox(height: trailingWhitespace!),

pubspec.lock

@@ -1361,4 +1361,4 @@ packages:
     version: "0.0.1"
 sdks:
   dart: ">=3.7.0-312.0.dev <4.0.0"
-  flutter: ">=3.28.0-2.0.pre.38699"
+  flutter: ">=3.28.0-2.0.pre.38699"