theme: Implement DesignVariables.dark

chrisbobbe · Jul 12, 2024 · ab1c17c · ab1c17c
1 parent ed34c05
commit ab1c17c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 12 deletions.
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
@@ -36,11 +36,11 @@ ThemeData zulipThemeData(BuildContext context) {
     : Brightness.light;
   switch (brightness) {
     case Brightness.light: {
-      designVariables = DesignVariables();
+      designVariables = DesignVariables.light();
       themeExtensions = [ContentTheme.light(context), designVariables];
     }
     case Brightness.dark: {
-      designVariables = DesignVariables(); // TODO(#95)
+      designVariables = DesignVariables.dark();
       themeExtensions = [ContentTheme.dark(context), designVariables];
     }
   }
@@ -115,13 +115,25 @@ const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
 /// For how to export these from the Figma, see:
 ///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2945-49492&t=MEb4vtp7S26nntxm-0
 class DesignVariables extends ThemeExtension<DesignVariables> {
-  DesignVariables() :
-    bgTopBar = const Color(0xfff5f5f5),
-    borderBar = const Color(0x33000000),
-    icon = const Color(0xff666699),
-    mainBackground = const Color(0xfff0f0f0),
-    title = const Color(0xff1a1a1a),
-    streamColorSwatches = StreamColorSwatches.light;
+  DesignVariables.light() :
+    this._(
+      bgTopBar: const Color(0xfff5f5f5),
+      borderBar: const Color(0x33000000),
+      icon: const Color(0xff666699),
+      mainBackground: const Color(0xfff0f0f0),
+      title: const Color(0xff1a1a1a),
+      streamColorSwatches: StreamColorSwatches.light,
+    );
+
+  DesignVariables.dark() :
+    this._(
+      bgTopBar: const Color(0xff242424),
+      borderBar: Colors.black.withOpacity(0.41),
+      icon: const Color(0xff7070c2),
+      mainBackground: const Color(0xff1d1d1d),
+      title: const Color(0xffffffff),
+      streamColorSwatches: StreamColorSwatches.dark,
+    );
 
   DesignVariables._({
     required this.bgTopBar,

diff --git a/test/widgets/theme_test.dart b/test/widgets/theme_test.dart
@@ -76,14 +76,46 @@ void main() {
       button: TextButton(onPressed: () {}, child: const Text(buttonText)));
   });
 
+  group('DesignVariables', () {
+    group('lerp', () {
+      testWidgets('light -> light', (tester) async {
+        final a = DesignVariables.light();
+        final b = DesignVariables.light();
+        check(() => a.lerp(b, 0.5)).returnsNormally();
+      });
+
+      testWidgets('light -> dark', (tester) async {
+        final a = DesignVariables.light();
+        final b = DesignVariables.dark();
+        check(() => a.lerp(b, 0.5)).returnsNormally();
+      });
+
+      testWidgets('dark -> light', (tester) async {
+        final a = DesignVariables.dark();
+        final b = DesignVariables.light();
+        check(() => a.lerp(b, 0.5)).returnsNormally();
+      });
+
+      testWidgets('dark -> dark', (tester) async {
+        final a = DesignVariables.dark();
+        final b = DesignVariables.dark();
+        check(() => a.lerp(b, 0.5)).returnsNormally();
+      });
+    });
+  });
+
   group('colorSwatchFor', () {
     const baseColor = 0xff76ce90;
 
-    testWidgets('light $baseColor', (WidgetTester tester) async {
+    testWidgets('light–dark animation', (WidgetTester tester) async {
       addTearDown(testBinding.reset);
 
       final subscription = eg.subscription(eg.stream(), color: baseColor);
 
+      debugFollowPlatformBrightness = true;
+      tester.platformDispatcher.platformBrightnessTestValue = Brightness.light;
+      addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue);
+
       await tester.pumpWidget(const ZulipApp());
       await tester.pump();
 
@@ -96,8 +128,19 @@ void main() {
       // Compares all the swatch's members; see [ColorSwatch]'s `operator ==`.
       check(colorSwatchFor(element, subscription))
         .equals(StreamColorSwatch.light(baseColor));
-    });
 
-    // TODO(#95) test with Brightness.dark and lerping between light/dark
+      tester.platformDispatcher.platformBrightnessTestValue = Brightness.dark;
+      await tester.pump();
+
+      await tester.pump(kThemeAnimationDuration * 0.4);
+      final expectedLerped = StreamColorSwatch.lerp(
+        StreamColorSwatch.light(baseColor),
+        StreamColorSwatch.dark(baseColor),
+        0.4)!;
+      check(colorSwatchFor(element, subscription)).equals(expectedLerped);
+
+      await tester.pump(kThemeAnimationDuration * 0.6);
+      check(colorSwatchFor(element, subscription)).equals(StreamColorSwatch.dark(baseColor));
+    });
   });
 }