theme: Implement DesignVariables.dark

Author: chrisbobbe

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,

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));
+ });
  });
 }