theme [nfc]: Pull outerThemeData out from app.dart to new theme.dart file

Author: chrisbobbe

lib/notifications/display.dart

@@ -16,6 +16,7 @@ import '../widgets/app.dart';
 import '../widgets/message_list.dart';
 import '../widgets/page.dart';
 import '../widgets/store.dart';
+import '../widgets/theme.dart';
 
 /// Service for configuring our Android "notification channel".
 class NotificationChannelManager {

lib/widgets/app.dart

@@ -15,7 +15,7 @@ import 'page.dart';
 import 'recent_dm_conversations.dart';
 import 'store.dart';
 import 'subscription_list.dart';
-import 'text.dart';
+import 'theme.dart';
 
 class ZulipApp extends StatefulWidget {
   const ZulipApp({super.key, this.navigatorObservers});
@@ -109,34 +109,6 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ThemeData(
-      typography: zulipTypography(context),
-      appBarTheme: const 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
-        // given a backgroundColor directly or by theme, it uses
-        // ColorScheme.surfaceContainer for the scrolled-under state and
-        // ColorScheme.surface otherwise, and those are different colors.
-        scrolledUnderElevation: 0,
-        backgroundColor: Color(0xfff5f5f5),
-
-        shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
-      ),
-      // 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(
-        seedColor: kZulipBrandColor,
-      ),
-      scaffoldBackgroundColor: const Color(0xfff6f6f6),
-      tooltipTheme: const TooltipThemeData(preferBelow: false),
-    );
-
     return GlobalStoreWidget(
       child: Builder(builder: (context) {
         final globalStore = GlobalStoreWidget.of(context);
@@ -146,7 +118,7 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
           title: 'Zulip',
           localizationsDelegates: ZulipLocalizations.localizationsDelegates,
           supportedLocales: ZulipLocalizations.supportedLocales,
-          theme: theme,
+          theme: outerThemeData(context),
 
           navigatorKey: ZulipApp.navigatorKey,
           navigatorObservers: widget.navigatorObservers ?? const [],
@@ -181,12 +153,6 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
   }
 }
 
-/// The Zulip "brand color", a purplish blue.
-///
-/// This is chosen as the sRGB midpoint of the Zulip logo's gradient.
-// As computed by Anders: https://github.com/zulip/zulip-mobile/pull/4467
-const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
-
 class ChooseAccountPage extends StatelessWidget {
   const ChooseAccountPage({super.key});
 

lib/widgets/theme.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+import 'text.dart';
+
+ThemeData outerThemeData(BuildContext context) {
+  return ThemeData(
+    typography: zulipTypography(context),
+    appBarTheme: const 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
+      // given a backgroundColor directly or by theme, it uses
+      // ColorScheme.surfaceContainer for the scrolled-under state and
+      // ColorScheme.surface otherwise, and those are different colors.
+      scrolledUnderElevation: 0,
+      backgroundColor: Color(0xfff5f5f5),
+
+      shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
+    ),
+    // 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(
+      seedColor: kZulipBrandColor,
+    ),
+    scaffoldBackgroundColor: const Color(0xfff6f6f6),
+    tooltipTheme: const TooltipThemeData(preferBelow: false),
+  );
+}
+
+/// The Zulip "brand color", a purplish blue.
+///
+/// This is chosen as the sRGB midpoint of the Zulip logo's gradient.
+// As computed by Anders: https://github.com/zulip/zulip-mobile/pull/4467
+const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);

test/notifications/display_test.dart

@@ -18,6 +18,7 @@ import 'package:zulip/widgets/app.dart';
 import 'package:zulip/widgets/inbox.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/page.dart';
+import 'package:zulip/widgets/theme.dart';
 
 import '../fake_async.dart';
 import '../model/binding.dart';