diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart index aadc41371b..c8742cae72 100644 --- 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() : - 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 index f0591cbb1a..b6d3c98a68 100644 --- a/test/widgets/theme_test.dart +++ b/test/widgets/theme_test.dart @@ -76,14 +76,48 @@ 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); + assert(!debugFollowPlatformBrightness); // to be removed with #95 + debugFollowPlatformBrightness = true; + addTearDown(() { debugFollowPlatformBrightness = false; }); + tester.platformDispatcher.platformBrightnessTestValue = Brightness.light; + addTearDown(tester.platformDispatcher.clearPlatformBrightnessTestValue); + await tester.pumpWidget(const ZulipApp()); await tester.pump(); @@ -96,8 +130,20 @@ 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); + check(colorSwatchFor(element, subscription)) + .equals(StreamColorSwatch.lerp( + StreamColorSwatch.light(baseColor), + StreamColorSwatch.dark(baseColor), + 0.4)!); + + await tester.pump(kThemeAnimationDuration * 0.6); + check(colorSwatchFor(element, subscription)) + .equals(StreamColorSwatch.dark(baseColor)); + }); }); }