ui [nfc]: Comment with TODO(#95) where we need dark-theme colors

Related: #95
In these places, I was unable to find a specific dark-theme color by
consulting web or the Figma (as it is now).

Author: chrisbobbe

lib/widgets/inbox.dart

@@ -245,6 +245,7 @@ abstract class _HeaderItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
+      // TODO(#95) need dark-theme color
       color: collapsed ? Colors.white : uncollapsedBackgroundColor,
       child: InkWell(
         // TODO use onRowTap to handle taps that are not on the collapse button.
@@ -256,6 +257,7 @@ abstract class _HeaderItem extends StatelessWidget {
         onTap: onCollapseButtonTap,
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           Padding(padding: const EdgeInsets.all(10),
+            // TODO(#95) need dark-theme color
             child: Icon(size: 20, color: const Color(0x7F1D2E48),
               collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)),
           Icon(size: 18, color: collapsed ? collapsedIconColor : uncollapsedIconColor,
@@ -267,6 +269,7 @@ abstract class _HeaderItem extends StatelessWidget {
               style: const TextStyle(
                 fontSize: 17,
                 height: (20 / 17),
+                // TODO(#95) need dark-theme color
                 color: Color(0xFF222222),
               ).merge(weightVariableTextStyle(context, wght: 600)),
               maxLines: 1,
@@ -292,8 +295,11 @@ class _AllDmsHeaderItem extends _HeaderItem {
 
   @override get title => 'Direct messages'; // TODO(i18n)
   @override get icon => ZulipIcons.user;
+
+  // TODO(#95) need dark-theme colors
   @override get collapsedIconColor => const Color(0xFF222222);
   @override get uncollapsedIconColor => const Color(0xFF222222);
+
   @override get uncollapsedBackgroundColor => const Color(0xFFF3F0E7);
   @override get unreadCountBadgeBackgroundColor => null;
 
@@ -367,6 +373,7 @@ class _DmItem extends StatelessWidget {
     };
 
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -382,6 +389,7 @@ class _DmItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF222222),
                 ),
                 maxLines: 2,
@@ -486,6 +494,7 @@ class _TopicItem extends StatelessWidget {
     final subscription = store.subscriptions[streamId]!;
 
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -502,6 +511,7 @@ class _TopicItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF222222),
                 ),
                 maxLines: 2,
@@ -519,6 +529,7 @@ class _TopicItem extends StatelessWidget {
 class _AtMentionMarker extends StatelessWidget {
   const _AtMentionMarker();
 
+  // TODO(#95) need dark-theme color
   static final markerColor = const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor();
 
   @override

lib/widgets/login.dart

@@ -621,6 +621,7 @@ class _UsernamePasswordFormState extends State<_UsernamePasswordForm> {
 }
 
 // Loosely based on the corresponding element in the web app.
+// TODO(#95) need dark-theme colors
 class OrDivider extends StatelessWidget {
   const OrDivider({super.key});
 

lib/widgets/recent_dm_conversations.dart

@@ -109,12 +109,15 @@ class RecentDmConversationsItem extends StatelessWidget {
         //   new Intl.ListFormat('ja').format(['Chris', 'Greg', 'Alya'])
         //   // 'Chris、Greg、Alya'
         title = narrow.otherRecipientIds.map((id) => store.users[id]?.fullName ?? '(unknown user)').join(', ');
+        // TODO(#95) need dark-theme color
         avatar = ColoredBox(color: const Color(0x33808080),
           child: Center(
+            // TODO(#95) need dark-theme color
             child: Icon(ZulipIcons.group_dm, color: Colors.black.withOpacity(0.5))));
     }
 
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -132,6 +135,7 @@ class RecentDmConversationsItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 17,
                   height: (20 / 17),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF222222),
                 ),
                 maxLines: 2,

lib/widgets/subscription_list.dart

@@ -118,6 +118,7 @@ class _NoSubscriptionsItem extends StatelessWidget {
         child: Text("No streams found",
           textAlign: TextAlign.center,
           style: TextStyle(
+            // TODO(#95) need dark-theme color
             color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
             fontSize: 18,
             height: (20 / 18),
@@ -133,9 +134,11 @@ class _SubscriptionListHeader extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final line = Expanded(child: Divider(
+      // TODO(#95) need dark-theme color
       color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor()));
     return SliverToBoxAdapter(
       child: ColoredBox(
+        // TODO(#95) need dark-theme color
         color: Colors.white,
         child: Row(crossAxisAlignment: CrossAxisAlignment.center,
           children: [
@@ -147,6 +150,7 @@ class _SubscriptionListHeader extends StatelessWidget {
               child: Text(label,
                 textAlign: TextAlign.center,
                 style: TextStyle(
+                  // TODO(#95) need dark-theme color
                   color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
                   fontSize: 14,
                   letterSpacing: proportionalLetterSpacing(context, 0.04, baseFontSize: 14),
@@ -197,6 +201,7 @@ class SubscriptionItem extends StatelessWidget {
     final swatch = subscription.colorSwatch();
     final hasUnreads = (unreadCount > 0);
     return Material(
+      // TODO(#95) need dark-theme color
       color: Colors.white,
       child: InkWell(
         onTap: () {
@@ -221,6 +226,7 @@ class SubscriptionItem extends StatelessWidget {
                 style: const TextStyle(
                   fontSize: 18,
                   height: (20 / 18),
+                  // TODO(#95) need dark-theme color
                   color: Color(0xFF262626),
                 ).merge(weightVariableTextStyle(context,
                     wght: hasUnreads ? 600 : null)),

lib/widgets/unread_count_badge.dart

@@ -32,6 +32,7 @@ class UnreadCountBadge extends StatelessWidget {
     final effectiveBackgroundColor = switch (backgroundColor) {
       StreamColorSwatch(unreadCountBadgeBackground: var color) => color,
       Color() => backgroundColor,
+      // TODO(#95) need dark-theme color
       null => const Color.fromRGBO(102, 102, 153, 0.15),
     };
 
@@ -57,6 +58,7 @@ class UnreadCountBadge extends StatelessWidget {
             //   - in dark mode use `Color.fromRGBO(255, 255, 255, 0.9)`
             //   The web app doesn't (yet?) use stream-colored unread markers
             //   so we can't take direction from there.
+            // TODO(#95) need dark-theme color
             color: Color(0xFF222222),
           ).merge(weightVariableTextStyle(context,
               wght: bold ? 600 : null)),