From 806e4fa3d24e837da58baa23cb7f78855a544100 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Fri, 2 Aug 2024 16:22:40 -0700 Subject: [PATCH 1/2] theme: Follow system setting for light/dark theme! We now have dark-theme variants in all the styles that differ between light and dark, in all of the app we've implemented so far. It's time to let users benefit from that work! We don't yet let the user choose between dark/light/system in the app -- that's #97 "Store some client settings" -- but the "system" behavior should be the default anyway, and this commit provides that. The dark-theme colors come from various sources. For each color, I believe the source is clear either in the code or the Git history. Those sources are: - Flutter's library of Material Design widgets, for UI that's been using those (like the compose box) - the "ready for dev" parts of the new Figma, like this: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2940-48987&m=dev - the web app (in its state when we wrote the zulip-flutter commit) - the table of variables in the new Figma, with a note that we're not sure if we chose the right variable (because that part of the UI doesn't have a "ready for dev" design in the Figma yet) - my brain and a quick check that it looked OK, as a last resort We'll want to update the colors as Vlad's work on the new Figma progresses, and also incorporate his feedback from trying out the app in dark theme. Fixes: #95 --- lib/widgets/theme.dart | 27 +-------------------------- test/widgets/emoji_reaction_test.dart | 4 ---- test/widgets/message_list_test.dart | 5 ----- test/widgets/theme_test.dart | 3 --- 4 files changed, 1 insertion(+), 38 deletions(-) diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index c155ffafe8..6ba2e30cd6 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -7,35 +7,10 @@ import 'message_list.dart'; import 'channel_colors.dart'; import 'text.dart'; -/// In debug mode, controls whether the UI responds to -/// [MediaQueryData.platformBrightness]. -/// -/// Outside of debug mode, this is always false and the setter has no effect. -// TODO(#95) when dark theme is fully implemented, simplify away; -// the UI should always respond. -bool get debugFollowPlatformBrightness { - bool result = false; - assert(() { - result = _debugFollowPlatformBrightness; - return true; - }()); - return result; -} -bool _debugFollowPlatformBrightness = false; -set debugFollowPlatformBrightness(bool value) { - assert(() { - _debugFollowPlatformBrightness = value; - return true; - }()); -} - - ThemeData zulipThemeData(BuildContext context) { final DesignVariables designVariables; final List themeExtensions; - Brightness brightness = debugFollowPlatformBrightness - ? MediaQuery.of(context).platformBrightness - : Brightness.light; + Brightness brightness = MediaQuery.of(context).platformBrightness; switch (brightness) { case Brightness.light: { designVariables = DesignVariables.light(); diff --git a/test/widgets/emoji_reaction_test.dart b/test/widgets/emoji_reaction_test.dart index fa96d1426e..a11d29c4ac 100644 --- a/test/widgets/emoji_reaction_test.dart +++ b/test/widgets/emoji_reaction_test.dart @@ -11,7 +11,6 @@ import 'package:zulip/api/model/events.dart'; import 'package:zulip/api/model/model.dart'; import 'package:zulip/model/store.dart'; import 'package:zulip/widgets/emoji_reaction.dart'; -import 'package:zulip/widgets/theme.dart'; import '../example_data.dart' as eg; import '../flutter_checks.dart'; @@ -221,9 +220,6 @@ void main() { await prepare(); await store.addUsers([eg.selfUser, eg.otherUser]); - assert(!debugFollowPlatformBrightness); // to be removed with #95 - debugFollowPlatformBrightness = true; - addTearDown(() { debugFollowPlatformBrightness = false; }); tester.platformDispatcher.platformBrightnessTestValue = Brightness.light; addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue); diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart index 071823bf65..bc55b3b427 100644 --- a/test/widgets/message_list_test.dart +++ b/test/widgets/message_list_test.dart @@ -21,7 +21,6 @@ import 'package:zulip/widgets/icons.dart'; import 'package:zulip/widgets/message_list.dart'; import 'package:zulip/widgets/store.dart'; import 'package:zulip/widgets/channel_colors.dart'; -import 'package:zulip/widgets/theme.dart'; import '../api/fake_api.dart'; import '../example_data.dart' as eg; @@ -152,10 +151,6 @@ void main() { }); testWidgets('smoke test for light/dark/lerped', (tester) async { - assert(!debugFollowPlatformBrightness); // to be removed with #95 - debugFollowPlatformBrightness = true; - addTearDown(() { debugFollowPlatformBrightness = false; }); - tester.platformDispatcher.platformBrightnessTestValue = Brightness.light; addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue); diff --git a/test/widgets/theme_test.dart b/test/widgets/theme_test.dart index eae672dddc..debe99419f 100644 --- a/test/widgets/theme_test.dart +++ b/test/widgets/theme_test.dart @@ -106,9 +106,6 @@ void main() { final subscription = eg.subscription(eg.stream(), color: baseColor); - assert(!debugFollowPlatformBrightness); // to be removed with #95 - debugFollowPlatformBrightness = true; - addTearDown(() { debugFollowPlatformBrightness = false; }); tester.platformDispatcher.platformBrightnessTestValue = Brightness.light; addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue); From fff2d8deeb9f7b8ee6ec9b61e2a07500a910e55c Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Fri, 2 Aug 2024 17:32:36 -0700 Subject: [PATCH 2/2] theme: Use slightly more efficient `MediaQuery.platformBrightnessOf` --- lib/widgets/theme.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index 6ba2e30cd6..ecc5478ef5 100644 --- a/lib/widgets/theme.dart +++ b/lib/widgets/theme.dart @@ -10,7 +10,7 @@ import 'text.dart'; ThemeData zulipThemeData(BuildContext context) { final DesignVariables designVariables; final List themeExtensions; - Brightness brightness = MediaQuery.of(context).platformBrightness; + Brightness brightness = MediaQuery.platformBrightnessOf(context); switch (brightness) { case Brightness.light: { designVariables = DesignVariables.light();