ui: Make some dark-theme adjustments from Greg's feedback

lib/widgets/app.dart

@@ -243,6 +243,8 @@ class HomePage extends StatelessWidget {
     final store = PerAccountStoreWidget.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
 
+    final colorScheme = ColorScheme.of(context);
+
     InlineSpan bold(String text) => TextSpan(
       style: const TextStyle().merge(weightVariableTextStyle(context, wght: 700)),
       text: text);
@@ -254,63 +256,68 @@ class HomePage extends StatelessWidget {
 
     return Scaffold(
       appBar: ZulipAppBar(title: const Text("Home")),
-      body: Center(
-        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
-          DefaultTextStyle.merge(
-            textAlign: TextAlign.center,
-            style: const TextStyle(fontSize: 18),
-            child: Column(children: [
-              const Text('🚧 Under construction 🚧'),
-              const SizedBox(height: 12),
-              Text.rich(TextSpan(
-                text: 'Connected to: ',
-                children: [bold(store.realmUrl.toString())])),
-              Text.rich(TextSpan(
-                text: 'Zulip server version: ',
-                children: [bold(store.zulipVersion)])),
-              Text(zulipLocalizations.subscribedToNChannels(store.subscriptions.length)),
-            ])),
-          const SizedBox(height: 16),
-          ElevatedButton(
-            onPressed: () => Navigator.push(context,
-              MessageListPage.buildRoute(context: context,
-                narrow: const CombinedFeedNarrow())),
-            child: Text(zulipLocalizations.combinedFeedPageTitle)),
-          const SizedBox(height: 16),
-          ElevatedButton(
-            onPressed: () => Navigator.push(context,
-              MessageListPage.buildRoute(context: context,
-                narrow: const MentionsNarrow())),
-            child: Text(zulipLocalizations.mentionsPageTitle)),
-          const SizedBox(height: 16),
-          ElevatedButton(
-            onPressed: () => Navigator.push(context,
-              MessageListPage.buildRoute(context: context,
-                narrow: const StarredMessagesNarrow())),
-            child: Text(zulipLocalizations.starredMessagesPageTitle)),
-          const SizedBox(height: 16),
-          ElevatedButton(
-            onPressed: () => Navigator.push(context,
-              InboxPage.buildRoute(context: context)),
-            child: const Text("Inbox")), // TODO(i18n)
-          const SizedBox(height: 16),
-          ElevatedButton(
-            onPressed: () => Navigator.push(context,
-              SubscriptionListPage.buildRoute(context: context)),
-            child: const Text("Subscribed channels")),
-          const SizedBox(height: 16),
-          ElevatedButton(
-            onPressed: () => Navigator.push(context,
-              RecentDmConversationsPage.buildRoute(context: context)),
-            child: Text(zulipLocalizations.recentDmConversationsPageTitle)),
-          if (testStreamId != null) ...[
+      body: ElevatedButtonTheme(
+        data: ElevatedButtonThemeData(style: ButtonStyle(
+          backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer),
+          foregroundColor: WidgetStatePropertyAll(colorScheme.onSecondaryContainer))),
+        child: Center(
+          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+            DefaultTextStyle.merge(
+              textAlign: TextAlign.center,
+              style: const TextStyle(fontSize: 18),
+              child: Column(children: [
+                const Text('🚧 Under construction 🚧'),
+                const SizedBox(height: 12),
+                Text.rich(TextSpan(
+                  text: 'Connected to: ',
+                  children: [bold(store.realmUrl.toString())])),
+                Text.rich(TextSpan(
+                  text: 'Zulip server version: ',
+                  children: [bold(store.zulipVersion)])),
+                Text(zulipLocalizations.subscribedToNChannels(store.subscriptions.length)),
+              ])),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: () => Navigator.push(context,
+                MessageListPage.buildRoute(context: context,
+                  narrow: const CombinedFeedNarrow())),
+              child: Text(zulipLocalizations.combinedFeedPageTitle)),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: () => Navigator.push(context,
+                MessageListPage.buildRoute(context: context,
+                  narrow: const MentionsNarrow())),
+              child: Text(zulipLocalizations.mentionsPageTitle)),
             const SizedBox(height: 16),
             ElevatedButton(
               onPressed: () => Navigator.push(context,
                 MessageListPage.buildRoute(context: context,
-                  narrow: ChannelNarrow(testStreamId!))),
-              child: const Text("#test here")), // scaffolding hack, see above
-          ],
-        ])));
+                  narrow: const StarredMessagesNarrow())),
+              child: Text(zulipLocalizations.starredMessagesPageTitle)),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: () => Navigator.push(context,
+                InboxPage.buildRoute(context: context)),
+              child: const Text("Inbox")), // TODO(i18n)
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: () => Navigator.push(context,
+                SubscriptionListPage.buildRoute(context: context)),
+              child: const Text("Subscribed channels")),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: () => Navigator.push(context,
+                RecentDmConversationsPage.buildRoute(context: context)),
+              child: Text(zulipLocalizations.recentDmConversationsPageTitle)),
+            if (testStreamId != null) ...[
+              const SizedBox(height: 16),
+              ElevatedButton(
+                onPressed: () => Navigator.push(context,
+                  MessageListPage.buildRoute(context: context,
+                    narrow: ChannelNarrow(testStreamId!))),
+                child: const Text("#test here")), // scaffolding hack, see above
+            ],
+          ])),
+      ));
   }
 }

lib/widgets/content.dart

@@ -71,10 +71,10 @@ class ContentTheme extends ThemeExtension<ContentTheme> {
         color: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
         debugLabel: 'ContentTheme.textStylePlainParagraph'),
       codeBlockTextStyles: CodeBlockTextStyles.dark(context),
-      textStyleError: TextStyle(fontSize: kBaseFontSize, color: Colors.red.shade900)
+      textStyleError: const TextStyle(fontSize: kBaseFontSize, color: Colors.red)
         .merge(weightVariableTextStyle(context, wght: 700)),
       textStyleErrorCode: kMonospaceTextStyle
-        .merge(TextStyle(fontSize: kBaseFontSize, color: Colors.red.shade900)),
+        .merge(const TextStyle(fontSize: kBaseFontSize, color: Colors.red)),
       textStyleInlineCode: kMonospaceTextStyle.merge(TextStyle(
         backgroundColor: const HSLColor.fromAHSL(0.08, 0, 0, 1).toColor())),
       textStyleInlineMath: kMonospaceTextStyle.merge(TextStyle(

lib/widgets/login.dart

@@ -428,15 +428,15 @@ class _LoginPageState extends State<LoginPage> {
           final icon = method.displayIcon;
           return OutlinedButton.icon(
             style: ButtonStyle(
-              backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer)),
+              backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer),
+              foregroundColor: WidgetStatePropertyAll(colorScheme.onSecondaryContainer)),
             icon: icon != null
               ? Image.network(icon, width: 24, height: 24)
               : null,
             onPressed: !_inProgress
               ? () => _beginWebAuth(method)
               : null,
             label: Text(
-              style: TextStyle(color: colorScheme.onSecondaryContainer),
               zulipLocalizations.signInWithFoo(method.displayName)));
         }),
       ],

lib/widgets/theme.dart

@@ -126,6 +126,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIconBg: const Color(0x33808080),
       loginOrDivider: const Color(0xffdedede),
       loginOrDividerText: const Color(0xff575757),
+      mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(),
       sectionCollapseIcon: const Color(0x7f1e2e48),
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
       subscriptionListHeaderLine: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor(),
@@ -158,6 +159,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIconBg: const Color(0x33cccccc),
       loginOrDivider: const Color(0xff424242),
       loginOrDividerText: const Color(0xffa8a8a8),
+      mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.3).toColor(),
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       sectionCollapseIcon: const Color(0x7fb6c8e2),
       // TODO(design-dark) unchanged in dark theme?
@@ -190,6 +192,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.groupDmConversationIconBg,
     required this.loginOrDivider,
     required this.loginOrDividerText,
+    required this.mutedUnreadBadge,
     required this.sectionCollapseIcon,
     required this.star,
     required this.subscriptionListHeaderLine,
@@ -231,6 +234,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color groupDmConversationIconBg;
   final Color loginOrDivider; // TODO(design-dark) need proper dark-theme color (this is ad hoc)
   final Color loginOrDividerText; // TODO(design-dark) need proper dark-theme color (this is ad hoc)
+  final Color mutedUnreadBadge;
   final Color sectionCollapseIcon;
   final Color star;
   final Color subscriptionListHeaderLine;
@@ -259,6 +263,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? groupDmConversationIconBg,
     Color? loginOrDivider,
     Color? loginOrDividerText,
+    Color? mutedUnreadBadge,
     Color? sectionCollapseIcon,
     Color? star,
     Color? subscriptionListHeaderLine,
@@ -286,6 +291,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg,
       loginOrDivider: loginOrDivider ?? this.loginOrDivider,
       loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText,
+      mutedUnreadBadge: mutedUnreadBadge ?? this.mutedUnreadBadge,
       sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon,
       star: star ?? this.star,
       subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine,
@@ -320,6 +326,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIconBg: Color.lerp(groupDmConversationIconBg, other.groupDmConversationIconBg, t)!,
       loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!,
       loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!,
+      mutedUnreadBadge: Color.lerp(mutedUnreadBadge, other.mutedUnreadBadge, t)!,
       sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!,
       star: Color.lerp(star, other.star, t)!,
       subscriptionListHeaderLine: Color.lerp(subscriptionListHeaderLine, other.subscriptionListHeaderLine, t)!,

lib/widgets/unread_count_badge.dart

@@ -63,12 +63,13 @@ class MutedUnreadBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
     return Container(
       width: 8,
       height: 8,
       margin: const EdgeInsetsDirectional.only(end: 3),
       decoration: BoxDecoration(
-        color: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(),
+        color: designVariables.mutedUnreadBadge,
         shape: BoxShape.circle));
   }
 }