theme: Apply ElevatedButtonTheme globally

This applies to all the `ElevatedButton`'s, which are exclusively used in `HomePage`, `LoginPage`, `ChooseAccountPage`, and `AddAccountPage, to fix their color in dark mode. Signed-off-by: Zixuan James Li <[email protected]>
zulip · Dec 11, 2024 · 0968948 · 0968948
1 parent 215b51a
commit 0968948
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 66 deletions.
diff --git a/lib/widgets/home.dart b/lib/widgets/home.dart
@@ -24,8 +24,6 @@ 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);
@@ -37,61 +35,57 @@ class HomePage extends StatelessWidget {
 
     return Scaffold(
       appBar: ZulipAppBar(title: const Text("Home")),
-      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: [
-                Text.rich(TextSpan(
-                  text: 'Connected to: ',
-                  children: [bold(store.realmUrl.toString())])),
-              ])),
-            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)),
+      body: Center(
+        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
+          DefaultTextStyle.merge(
+            textAlign: TextAlign.center,
+            style: const TextStyle(fontSize: 18),
+            child: Column(children: [
+              Text.rich(TextSpan(
+                text: 'Connected to: ',
+                children: [bold(store.realmUrl.toString())])),
+            ])),
+          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) ...[
             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) ...[
-              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: ChannelNarrow(testStreamId!))),
+              child: const Text("#test here")), // scaffolding hack, see above
+          ],
+        ])));
   }
 }
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
@@ -11,6 +11,19 @@ ThemeData zulipThemeData(BuildContext context) {
   final DesignVariables designVariables;
   final List<ThemeExtension> themeExtensions;
   Brightness brightness = MediaQuery.platformBrightnessOf(context);
+
+  // This applies Material 3's color system to produce a palette of
+  // appropriately matching and contrasting colors for use in a UI.
+  // The Zulip brand color is a starting point, but doesn't end up as
+  // one that's directly used.  (After all, we didn't design it for that
+  // purpose; we designed a logo.)  See docs:
+  //   https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
+  // Or try this tool to see the whole palette:
+  //   https://m3.material.io/theme-builder#/custom
+  final colorScheme = ColorScheme.fromSeed(
+    brightness: brightness,
+    seedColor: kZulipBrandColor);
+
   switch (brightness) {
     case Brightness.light: {
       designVariables = DesignVariables.light();
@@ -39,6 +52,10 @@ ThemeData zulipThemeData(BuildContext context) {
     iconButtonTheme: IconButtonThemeData(style: IconButton.styleFrom(
       foregroundColor: designVariables.icon,
     )),
+    elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(
+      backgroundColor: colorScheme.secondaryContainer,
+      foregroundColor: colorScheme.onSecondaryContainer,
+    )),
     appBarTheme: AppBarTheme(
       // Set these two fields to prevent a color change in [AppBar]s when
       // there is something scrolled under it. If an app bar hasn't been
@@ -74,18 +91,7 @@ ThemeData zulipThemeData(BuildContext context) {
         strokeAlign: BorderSide.strokeAlignInside, // (default restated for explicitness)
       )),
     ),
-    // This applies Material 3's color system to produce a palette of
-    // appropriately matching and contrasting colors for use in a UI.
-    // The Zulip brand color is a starting point, but doesn't end up as
-    // one that's directly used.  (After all, we didn't design it for that
-    // purpose; we designed a logo.)  See docs:
-    //   https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
-    // Or try this tool to see the whole palette:
-    //   https://m3.material.io/theme-builder#/custom
-    colorScheme: ColorScheme.fromSeed(
-      brightness: brightness,
-      seedColor: kZulipBrandColor,
-    ),
+    colorScheme: colorScheme,
     scaffoldBackgroundColor: designVariables.mainBackground,
     tooltipTheme: const TooltipThemeData(preferBelow: false),
     bottomSheetTheme: BottomSheetThemeData(