theme: Compute colorSwatchFor when subscription is null

Looking into the design requirement a bit more, we initially fall back
to this color because we didn't have the logic to generate channel
colors:
  https://chat.zulip.org/#narrow/channel/48-mobile/topic/All.20channels.20screen.20-.20.23F832/near/1904009

This replaces the ad-hoc colors with generated colors based on a
fallback base color.

The base color we fall back to is still a placeholder.  Ideally, we
should pick a color for the unsubscribed streams, as shown in the
Figma design linked in #188.  That issue is out-of-scope for this,
though.

For now, it's sufficient to just remove the ad-hoc color on
MessageListTheme.  This way we don't have to reuse it in places
where colors for unsubscribed streams are needed, namely the topic list.

Author: PIG208

lib/widgets/message_list.dart

@@ -46,9 +46,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     unreadMarker: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor(),
 
     unreadMarkerGap: Colors.white.withValues(alpha: 0.6),
-
-    // TODO(design) this seems ad-hoc; is there a better color?
-    unsubscribedStreamRecipientHeaderBg: const Color(0xfff5f5f5),
   );
 
   static final dark = MessageListTheme._(
@@ -66,9 +63,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     unreadMarker: const HSLColor.fromAHSL(0.75, 227, 0.78, 0.59).toColor(),
 
     unreadMarkerGap: Colors.transparent,
-
-    // TODO(design) this is ad-hoc and untested; is there a better color?
-    unsubscribedStreamRecipientHeaderBg: const Color(0xff0a0a0a),
   );
 
   MessageListTheme._({
@@ -79,7 +73,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     required this.streamRecipientHeaderChevronRight,
     required this.unreadMarker,
     required this.unreadMarkerGap,
-    required this.unsubscribedStreamRecipientHeaderBg,
   });
 
   /// The [MessageListTheme] from the context's active theme.
@@ -99,7 +92,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   final Color streamRecipientHeaderChevronRight;
   final Color unreadMarker;
   final Color unreadMarkerGap;
-  final Color unsubscribedStreamRecipientHeaderBg;
 
   @override
   MessageListTheme copyWith({
@@ -110,7 +102,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     Color? streamRecipientHeaderChevronRight,
     Color? unreadMarker,
     Color? unreadMarkerGap,
-    Color? unsubscribedStreamRecipientHeaderBg,
   }) {
     return MessageListTheme._(
       bgMessageRegular: bgMessageRegular ?? this.bgMessageRegular,
@@ -120,7 +111,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       streamRecipientHeaderChevronRight: streamRecipientHeaderChevronRight ?? this.streamRecipientHeaderChevronRight,
       unreadMarker: unreadMarker ?? this.unreadMarker,
       unreadMarkerGap: unreadMarkerGap ?? this.unreadMarkerGap,
-      unsubscribedStreamRecipientHeaderBg: unsubscribedStreamRecipientHeaderBg ?? this.unsubscribedStreamRecipientHeaderBg,
     );
   }
 
@@ -137,7 +127,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       streamRecipientHeaderChevronRight: Color.lerp(streamRecipientHeaderChevronRight, other.streamRecipientHeaderChevronRight, t)!,
       unreadMarker: Color.lerp(unreadMarker, other.unreadMarker, t)!,
       unreadMarkerGap: Color.lerp(unreadMarkerGap, other.unreadMarkerGap, t)!,
-      unsubscribedStreamRecipientHeaderBg: Color.lerp(unsubscribedStreamRecipientHeaderBg, other.unsubscribedStreamRecipientHeaderBg, t)!,
     );
   }
 }
@@ -228,9 +217,8 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
       case ChannelNarrow(:final streamId):
       case TopicNarrow(:final streamId):
         final subscription = store.subscriptions[streamId];
-        appBarBackgroundColor = subscription != null
-          ? colorSwatchFor(context, subscription).barBackground
-          : messageListTheme.unsubscribedStreamRecipientHeaderBg;
+        appBarBackgroundColor =
+          colorSwatchFor(context, subscription).barBackground;
         // All recipient headers will match this color; remove distracting line
         // (but are recipient headers even needed for topic narrows?)
         removeAppBarBottomBorder = true;
@@ -1054,24 +1042,15 @@ class StreamMessageRecipientHeader extends StatelessWidget {
     //   https://github.com/zulip/zulip-mobile/issues/5511
     final store = PerAccountStoreWidget.of(context);
     final designVariables = DesignVariables.of(context);
+    final messageListTheme = MessageListTheme.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
 
     final streamId = message.conversation.streamId;
     final topic = message.conversation.topic;
 
-    final messageListTheme = MessageListTheme.of(context);
-
-    final subscription = store.subscriptions[streamId];
-    final Color backgroundColor;
-    final Color iconColor;
-    if (subscription != null) {
-      final swatch = colorSwatchFor(context, subscription);
-      backgroundColor = swatch.barBackground;
-      iconColor = swatch.iconOnBarBackground;
-    } else {
-      backgroundColor = messageListTheme.unsubscribedStreamRecipientHeaderBg;
-      iconColor = designVariables.title;
-    }
+    final swatch = colorSwatchFor(context, store.subscriptions[streamId]);
+    final backgroundColor = swatch.barBackground;
+    final iconColor = swatch.iconOnBarBackground;
 
     final Widget streamWidget;
     if (!_containsDifferentChannels(narrow)) {

lib/widgets/theme.dart

@@ -554,10 +554,19 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   }
 }
 
+// This is taken from:
+//   https://github.com/zulip/zulip/blob/b248e2d93/web/src/stream_data.ts#L40
+const kDefaultChannelColorSwatchBaseColor = 0xffc2c2c2;
+
 /// The theme-appropriate [ChannelColorSwatch] based on [subscription.color].
 ///
+/// If [subscription] is null, [ChannelColorSwatch] will be based on
+/// [kDefaultChannelColorSwatchBaseColor].
+///
 /// For how this value is cached, see [ChannelColorSwatches.forBaseColor].
-ChannelColorSwatch colorSwatchFor(BuildContext context, Subscription subscription) {
+// TODO(#188) pick different colors for unsubscribed channels
+ChannelColorSwatch colorSwatchFor(BuildContext context, Subscription? subscription) {
   return DesignVariables.of(context)
-    .channelColorSwatches.forBaseColor(subscription.color);
+    .channelColorSwatches.forBaseColor(
+      subscription?.color ?? kDefaultChannelColorSwatchBaseColor);
 }

test/widgets/theme_test.dart

@@ -178,5 +178,13 @@ void main() {
       check(colorSwatchFor(element, subscription))
         .isSameColorSwatchAs(ChannelColorSwatch.dark(baseColor));
     });
+
+    testWidgets('fallback to default base color when no subscription', (tester) async {
+      await tester.pumpWidget(const TestZulipApp());
+      await tester.pump();
+      final element = tester.element(find.byType(Placeholder));
+      check(colorSwatchFor(element, null)).isSameColorSwatchAs(
+        ChannelColorSwatch.light(kDefaultChannelColorSwatchBaseColor));
+    });
   });
 }