From af20651cb3c000e0a7c745644cafe71a140a4797 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Fri, 26 Apr 2024 16:42:16 -0700 Subject: [PATCH] theme [nfc]: Pull `zulipThemeData` out from app.dart to new theme.dart file --- lib/notifications/display.dart | 1 + lib/widgets/app.dart | 39 +++------------------------- lib/widgets/theme.dart | 39 ++++++++++++++++++++++++++++ test/notifications/display_test.dart | 1 + 4 files changed, 44 insertions(+), 36 deletions(-) create mode 100644 lib/widgets/theme.dart diff --git a/lib/notifications/display.dart b/lib/notifications/display.dart index 3247cb6572..f2891c3d2a 100644 --- a/lib/notifications/display.dart +++ b/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 { diff --git a/lib/widgets/app.dart b/lib/widgets/app.dart index d1a6b731fa..88fdcbe96f 100644 --- a/lib/widgets/app.dart +++ b/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,7 @@ class _ZulipAppState extends State 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), - ); - + final themeData = zulipThemeData(context); return GlobalStoreWidget( child: Builder(builder: (context) { final globalStore = GlobalStoreWidget.of(context); @@ -146,7 +119,7 @@ class _ZulipAppState extends State with WidgetsBindingObserver { title: 'Zulip', localizationsDelegates: ZulipLocalizations.localizationsDelegates, supportedLocales: ZulipLocalizations.supportedLocales, - theme: theme, + theme: themeData, navigatorKey: ZulipApp.navigatorKey, navigatorObservers: widget.navigatorObservers ?? const [], @@ -181,12 +154,6 @@ class _ZulipAppState extends State 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}); diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart new file mode 100644 index 0000000000..d6ee380376 --- /dev/null +++ b/lib/widgets/theme.dart @@ -0,0 +1,39 @@ +import 'package:flutter/material.dart'; + +import 'text.dart'; + +ThemeData zulipThemeData(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); diff --git a/test/notifications/display_test.dart b/test/notifications/display_test.dart index d0f95b0521..9017fccba0 100644 --- a/test/notifications/display_test.dart +++ b/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';