Skip to content

Commit 0968948

Browse files
PIG208PIG208
committed
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]>
1 parent 215b51a commit 0968948

File tree

2 files changed

+66
-66
lines changed

2 files changed

+66
-66
lines changed

‎lib/widgets/home.dart

Lines changed: 48 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ class HomePage extends StatelessWidget {
2424
final store = PerAccountStoreWidget.of(context);
2525
final zulipLocalizations = ZulipLocalizations.of(context);
2626

27-
final colorScheme = ColorScheme.of(context);
28-
2927
InlineSpan bold(String text) => TextSpan(
3028
style: const TextStyle().merge(weightVariableTextStyle(context, wght: 700)),
3129
text: text);
@@ -37,61 +35,57 @@ class HomePage extends StatelessWidget {
3735

3836
return Scaffold(
3937
appBar: ZulipAppBar(title: const Text("Home")),
40-
body: ElevatedButtonTheme(
41-
data: ElevatedButtonThemeData(style: ButtonStyle(
42-
backgroundColor: WidgetStatePropertyAll(colorScheme.secondaryContainer),
43-
foregroundColor: WidgetStatePropertyAll(colorScheme.onSecondaryContainer))),
44-
child: Center(
45-
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
46-
DefaultTextStyle.merge(
47-
textAlign: TextAlign.center,
48-
style: const TextStyle(fontSize: 18),
49-
child: Column(children: [
50-
Text.rich(TextSpan(
51-
text: 'Connected to: ',
52-
children: [bold(store.realmUrl.toString())])),
53-
])),
54-
const SizedBox(height: 16),
55-
ElevatedButton(
56-
onPressed: () => Navigator.push(context,
57-
MessageListPage.buildRoute(context: context,
58-
narrow: const CombinedFeedNarrow())),
59-
child: Text(zulipLocalizations.combinedFeedPageTitle)),
60-
const SizedBox(height: 16),
61-
ElevatedButton(
62-
onPressed: () => Navigator.push(context,
63-
MessageListPage.buildRoute(context: context,
64-
narrow: const MentionsNarrow())),
65-
child: Text(zulipLocalizations.mentionsPageTitle)),
38+
body: Center(
39+
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
40+
DefaultTextStyle.merge(
41+
textAlign: TextAlign.center,
42+
style: const TextStyle(fontSize: 18),
43+
child: Column(children: [
44+
Text.rich(TextSpan(
45+
text: 'Connected to: ',
46+
children: [bold(store.realmUrl.toString())])),
47+
])),
48+
const SizedBox(height: 16),
49+
ElevatedButton(
50+
onPressed: () => Navigator.push(context,
51+
MessageListPage.buildRoute(context: context,
52+
narrow: const CombinedFeedNarrow())),
53+
child: Text(zulipLocalizations.combinedFeedPageTitle)),
54+
const SizedBox(height: 16),
55+
ElevatedButton(
56+
onPressed: () => Navigator.push(context,
57+
MessageListPage.buildRoute(context: context,
58+
narrow: const MentionsNarrow())),
59+
child: Text(zulipLocalizations.mentionsPageTitle)),
60+
const SizedBox(height: 16),
61+
ElevatedButton(
62+
onPressed: () => Navigator.push(context,
63+
MessageListPage.buildRoute(context: context,
64+
narrow: const StarredMessagesNarrow())),
65+
child: Text(zulipLocalizations.starredMessagesPageTitle)),
66+
const SizedBox(height: 16),
67+
ElevatedButton(
68+
onPressed: () => Navigator.push(context,
69+
InboxPage.buildRoute(context: context)),
70+
child: const Text("Inbox")), // TODO(i18n)
71+
const SizedBox(height: 16),
72+
ElevatedButton(
73+
onPressed: () => Navigator.push(context,
74+
SubscriptionListPage.buildRoute(context: context)),
75+
child: const Text("Subscribed channels")),
76+
const SizedBox(height: 16),
77+
ElevatedButton(
78+
onPressed: () => Navigator.push(context,
79+
RecentDmConversationsPage.buildRoute(context: context)),
80+
child: Text(zulipLocalizations.recentDmConversationsPageTitle)),
81+
if (testStreamId != null) ...[
6682
const SizedBox(height: 16),
6783
ElevatedButton(
6884
onPressed: () => Navigator.push(context,
6985
MessageListPage.buildRoute(context: context,
70-
narrow: const StarredMessagesNarrow())),
71-
child: Text(zulipLocalizations.starredMessagesPageTitle)),
72-
const SizedBox(height: 16),
73-
ElevatedButton(
74-
onPressed: () => Navigator.push(context,
75-
InboxPage.buildRoute(context: context)),
76-
child: const Text("Inbox")), // TODO(i18n)
77-
const SizedBox(height: 16),
78-
ElevatedButton(
79-
onPressed: () => Navigator.push(context,
80-
SubscriptionListPage.buildRoute(context: context)),
81-
child: const Text("Subscribed channels")),
82-
const SizedBox(height: 16),
83-
ElevatedButton(
84-
onPressed: () => Navigator.push(context,
85-
RecentDmConversationsPage.buildRoute(context: context)),
86-
child: Text(zulipLocalizations.recentDmConversationsPageTitle)),
87-
if (testStreamId != null) ...[
88-
const SizedBox(height: 16),
89-
ElevatedButton(
90-
onPressed: () => Navigator.push(context,
91-
MessageListPage.buildRoute(context: context,
92-
narrow: ChannelNarrow(testStreamId!))),
93-
child: const Text("#test here")), // scaffolding hack, see above
94-
],
95-
]))));
86+
narrow: ChannelNarrow(testStreamId!))),
87+
child: const Text("#test here")), // scaffolding hack, see above
88+
],
89+
])));
9690
}
9791
}

‎lib/widgets/theme.dart

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,19 @@ ThemeData zulipThemeData(BuildContext context) {
1111
final DesignVariables designVariables;
1212
final List<ThemeExtension> themeExtensions;
1313
Brightness brightness = MediaQuery.platformBrightnessOf(context);
14+
15+
// This applies Material 3's color system to produce a palette of
16+
// appropriately matching and contrasting colors for use in a UI.
17+
// The Zulip brand color is a starting point, but doesn't end up as
18+
// one that's directly used. (After all, we didn't design it for that
19+
// purpose; we designed a logo.) See docs:
20+
// https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
21+
// Or try this tool to see the whole palette:
22+
// https://m3.material.io/theme-builder#/custom
23+
final colorScheme = ColorScheme.fromSeed(
24+
brightness: brightness,
25+
seedColor: kZulipBrandColor);
26+
1427
switch (brightness) {
1528
case Brightness.light: {
1629
designVariables = DesignVariables.light();
@@ -39,6 +52,10 @@ ThemeData zulipThemeData(BuildContext context) {
3952
iconButtonTheme: IconButtonThemeData(style: IconButton.styleFrom(
4053
foregroundColor: designVariables.icon,
4154
)),
55+
elevatedButtonTheme: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(
56+
backgroundColor: colorScheme.secondaryContainer,
57+
foregroundColor: colorScheme.onSecondaryContainer,
58+
)),
4259
appBarTheme: AppBarTheme(
4360
// Set these two fields to prevent a color change in [AppBar]s when
4461
// there is something scrolled under it. If an app bar hasn't been
@@ -74,18 +91,7 @@ ThemeData zulipThemeData(BuildContext context) {
7491
strokeAlign: BorderSide.strokeAlignInside, // (default restated for explicitness)
7592
)),
7693
),
77-
// This applies Material 3's color system to produce a palette of
78-
// appropriately matching and contrasting colors for use in a UI.
79-
// The Zulip brand color is a starting point, but doesn't end up as
80-
// one that's directly used. (After all, we didn't design it for that
81-
// purpose; we designed a logo.) See docs:
82-
// https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
83-
// Or try this tool to see the whole palette:
84-
// https://m3.material.io/theme-builder#/custom
85-
colorScheme: ColorScheme.fromSeed(
86-
brightness: brightness,
87-
seedColor: kZulipBrandColor,
88-
),
94+
colorScheme: colorScheme,
8995
scaffoldBackgroundColor: designVariables.mainBackground,
9096
tooltipTheme: const TooltipThemeData(preferBelow: false),
9197
bottomSheetTheme: BottomSheetThemeData(

0 commit comments

Comments
 (0)