theme: Track theme through global settings

Signed-off-by: Zixuan James Li <zixuan@zulip.com>

Author: PIG208

lib/widgets/app.dart

@@ -212,41 +212,45 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
 
   @override
   Widget build(BuildContext context) {
-    final themeData = zulipThemeData(context);
     return GlobalStoreWidget(
-      child: MaterialApp(
-        onGenerateTitle: (BuildContext context) {
-          return ZulipLocalizations.of(context).zulipAppTitle;
-        },
-        localizationsDelegates: ZulipLocalizations.localizationsDelegates,
-        supportedLocales: ZulipLocalizations.supportedLocales,
-        theme: themeData,
-
-        navigatorKey: ZulipApp.navigatorKey,
-        navigatorObservers: [
-          if (widget.navigatorObservers != null)
-            ...widget.navigatorObservers!,
-          _PreventEmptyStack(),
-        ],
-        builder: (BuildContext context, Widget? child) {
-          if (!ZulipApp.ready.value) {
-            SchedulerBinding.instance.addPostFrameCallback(
-              (_) => widget._declareReady());
-          }
-          GlobalLocalizations.zulipLocalizations = ZulipLocalizations.of(context);
-          return child!;
-        },
-
-        // We use onGenerateInitialRoutes for the real work of specifying the
-        // initial nav state.  To do that we need [MaterialApp] to decide to
-        // build a [Navigator]... which means specifying either `home`, `routes`,
-        // `onGenerateRoute`, or `onUnknownRoute`.  Make it `onGenerateRoute`.
-        // It never actually gets called, though: `onGenerateInitialRoutes`
-        // handles startup, and then we always push whole routes with methods
-        // like [Navigator.push], never mere names as with [Navigator.pushNamed].
-        onGenerateRoute: (_) => null,
-
-        onGenerateInitialRoutes: _handleGenerateInitialRoutes));
+      child: Builder(
+        builder: (context) {
+          return MaterialApp(
+            onGenerateTitle: (BuildContext context) {
+              return ZulipLocalizations.of(context).zulipAppTitle;
+            },
+            localizationsDelegates: ZulipLocalizations.localizationsDelegates,
+            supportedLocales: ZulipLocalizations.supportedLocales,
+            // The context has to be taken from the [Builder] because
+            // [zulipThemeData] requires access to [GlobalStoreWidget] in the tree.
+            theme: zulipThemeData(context),
+
+            navigatorKey: ZulipApp.navigatorKey,
+            navigatorObservers: [
+              if (widget.navigatorObservers != null)
+                ...widget.navigatorObservers!,
+              _PreventEmptyStack(),
+            ],
+            builder: (BuildContext context, Widget? child) {
+              if (!ZulipApp.ready.value) {
+                SchedulerBinding.instance.addPostFrameCallback(
+                  (_) => widget._declareReady());
+              }
+              GlobalLocalizations.zulipLocalizations = ZulipLocalizations.of(context);
+              return child!;
+            },
+
+            // We use onGenerateInitialRoutes for the real work of specifying the
+            // initial nav state.  To do that we need [MaterialApp] to decide to
+            // build a [Navigator]... which means specifying either `home`, `routes`,
+            // `onGenerateRoute`, or `onUnknownRoute`.  Make it `onGenerateRoute`.
+            // It never actually gets called, though: `onGenerateInitialRoutes`
+            // handles startup, and then we always push whole routes with methods
+            // like [Navigator.push], never mere names as with [Navigator.pushNamed].
+            onGenerateRoute: (_) => null,
+
+            onGenerateInitialRoutes: _handleGenerateInitialRoutes);
+        }));
   }
 }
 

lib/widgets/theme.dart

@@ -1,17 +1,24 @@
 import 'package:flutter/material.dart';
 
 import '../api/model/model.dart';
+import '../model/settings.dart';
 import 'compose_box.dart';
 import 'content.dart';
 import 'emoji_reaction.dart';
 import 'message_list.dart';
 import 'channel_colors.dart';
+import 'store.dart';
 import 'text.dart';
 
 ThemeData zulipThemeData(BuildContext context) {
   final DesignVariables designVariables;
   final List<ThemeExtension> themeExtensions;
-  Brightness brightness = MediaQuery.platformBrightnessOf(context);
+  final globalSettings = GlobalStoreWidget.of(context).globalSettings;
+  Brightness brightness = switch (globalSettings.themeSetting) {
+    null => MediaQuery.platformBrightnessOf(context),
+    ThemeSetting.light => Brightness.light,
+    ThemeSetting.dark => Brightness.dark,
+  };
 
   // This applies Material 3's color system to produce a palette of
   // appropriately matching and contrasting colors for use in a UI.

test/flutter_checks.dart

@@ -74,6 +74,10 @@ extension ValueListenableChecks<T> on Subject<ValueListenable<T>> {
   Subject<T> get value => has((c) => c.value, 'value');
 }
 
+extension ThemeDataChecks on Subject<ThemeData> {
+  Subject<Brightness> get brightness => has((x) => x.brightness, 'brightness');
+}
+
 extension TextChecks on Subject<Text> {
   Subject<String?> get data => has((t) => t.data, 'data');
   Subject<TextStyle?> get style => has((t) => t.style, 'style');

test/widgets/test_app.dart

@@ -73,6 +73,8 @@ class TestZulipApp extends StatelessWidget {
         title: 'Zulip',
         localizationsDelegates: ZulipLocalizations.localizationsDelegates,
         supportedLocales: ZulipLocalizations.supportedLocales,
+        // The context has to be taken from the [Builder] because
+        // [zulipThemeData] requires access to [GlobalStoreWidget] in the tree.
         theme: zulipThemeData(context),
 
         navigatorObservers: navigatorObservers ?? const [],

test/widgets/theme_test.dart

@@ -1,14 +1,18 @@
 import 'package:checks/checks.dart';
+import 'package:drift/drift.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:zulip/model/database.dart';
+import 'package:zulip/model/settings.dart';
 import 'package:zulip/widgets/channel_colors.dart';
 import 'package:zulip/widgets/text.dart';
 import 'package:zulip/widgets/theme.dart';
 
 import '../example_data.dart' as eg;
 import '../flutter_checks.dart';
 import '../model/binding.dart';
+import '../model/store_checks.dart';
 import 'colors_checks.dart';
 import 'test_app.dart';
 
@@ -99,6 +103,46 @@ void main() {
     });
   });
 
+  testWidgets('when globalSettings.themeSetting is null, follow system setting', (tester) async {
+    addTearDown(testBinding.reset);
+
+    tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
+    addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);
+
+    await tester.pumpWidget(const TestZulipApp(child: Placeholder()));
+    await tester.pump();
+    check(testBinding.globalStore).globalSettings.themeSetting.isNull();
+
+    final element = tester.element(find.byType(Placeholder));
+    check(zulipThemeData(element)).brightness.equals(Brightness.light);
+
+    tester.platformDispatcher.platformBrightnessTestValue = Brightness.dark;
+    await tester.pump();
+    check(zulipThemeData(element)).brightness.equals(Brightness.dark);
+  });
+
+  testWidgets('when globalSettings.themeSetting is non-null, override system setting', (tester) async {
+    addTearDown(testBinding.reset);
+
+    tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
+    addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);
+
+    await tester.pumpWidget(const TestZulipApp(child: Placeholder()));
+    await tester.pump();
+    check(testBinding.globalStore).globalSettings.themeSetting.isNull();
+
+    final element = tester.element(find.byType(Placeholder));
+    check(zulipThemeData(element)).brightness.equals(Brightness.light);
+
+    await testBinding.globalStore.updateGlobalSettings(
+      const GlobalSettingsCompanion(themeSetting: Value(ThemeSetting.dark)));
+    check(zulipThemeData(element)).brightness.equals(Brightness.dark);
+
+    await testBinding.globalStore.updateGlobalSettings(
+      const GlobalSettingsCompanion(themeSetting: Value(null)));
+    check(zulipThemeData(element)).brightness.equals(Brightness.light);
+  });
+
   group('colorSwatchFor', () {
     const baseColor = 0xff76ce90;