Make alternate row colors consistent globally

Introduces a new theme extension.
lichess-org · Feb 22, 2025 · ffdad9c · ffdad9c
1 parent b7ebf2b
commit ffdad9c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 24 deletions.
diff --git a/lib/src/theme.dart b/lib/src/theme.dart
@@ -44,6 +44,43 @@ const kSliderTheme = SliderThemeData(
   }
 }
 
+/// A custom theme extension that adds lichess custom properties to the theme.
+@immutable
+class CustomTheme extends ThemeExtension<CustomTheme> {
+  const CustomTheme({required this.rowEven, required this.rowOdd});
+
+  final Color rowEven;
+  final Color rowOdd;
+
+  @override
+  CustomTheme copyWith({Color? rowEven, Color? rowOdd}) {
+    return CustomTheme(rowEven: rowEven ?? this.rowEven, rowOdd: rowOdd ?? this.rowOdd);
+  }
+
+  @override
+  CustomTheme lerp(ThemeExtension<CustomTheme>? other, double t) {
+    if (other is! CustomTheme) {
+      return this;
+    }
+    return CustomTheme(
+      rowEven: Color.lerp(rowEven, other.rowEven, t) ?? rowEven,
+      rowOdd: Color.lerp(rowOdd, other.rowOdd, t) ?? rowOdd,
+    );
+  }
+}
+
+/// A [BuildContext] extension that provides the [lichessTheme] property.
+extension CustomThemeBuildContext on BuildContext {
+  CustomTheme get _defaultLichessTheme => CustomTheme(
+    rowEven: ColorScheme.of(this).surfaceContainer,
+    rowOdd: ColorScheme.of(this).surfaceContainerHigh,
+  );
+
+  CustomTheme get lichessTheme => Theme.of(this).extension<CustomTheme>() ?? _defaultLichessTheme;
+}
+
+// --
+
 ({ThemeData light, ThemeData dark}) _makeDefaultTheme(
   BuildContext context,
   GeneralPrefs generalPrefs,
@@ -110,7 +147,11 @@ const kSliderTheme = SliderThemeData(
       pageTransitionsTheme: kPageTransitionsTheme,
       progressIndicatorTheme: kProgressIndicatorTheme,
       sliderTheme: kSliderTheme,
-      extensions: [lichessCustomColors.harmonized(themeLight.colorScheme)],
+      extensions: [
+        lichessCustomColors.harmonized(themeLight.colorScheme),
+        if (isIOS)
+          const CustomTheme(rowEven: Colors.white, rowOdd: Color.fromARGB(255, 247, 246, 245)),
+      ],
     ),
     dark: themeDark.copyWith(
       cupertinoOverrideTheme: darkCupertino,

diff --git a/lib/src/view/broadcast/broadcast_player_results_screen.dart b/lib/src/view/broadcast/broadcast_player_results_screen.dart
@@ -8,6 +8,7 @@ import 'package:lichess_mobile/src/model/broadcast/broadcast_federation.dart';
 import 'package:lichess_mobile/src/model/broadcast/broadcast_providers.dart';
 import 'package:lichess_mobile/src/model/common/id.dart';
 import 'package:lichess_mobile/src/styles/styles.dart';
+import 'package:lichess_mobile/src/theme.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/utils/navigation.dart';
 import 'package:lichess_mobile/src/view/broadcast/broadcast_game_screen.dart';
@@ -271,10 +272,7 @@ class _Body extends ConsumerWidget {
                 );
               },
               child: ColoredBox(
-                color:
-                    index.isEven
-                        ? ColorScheme.of(context).surfaceContainer
-                        : ColorScheme.of(context).surfaceContainerHigh,
+                color: index.isEven ? context.lichessTheme.rowEven : context.lichessTheme.rowOdd,
                 child: Padding(
                   padding: _kTableRowPadding,
                   child: Row(

diff --git a/lib/src/view/broadcast/broadcast_players_tab.dart b/lib/src/view/broadcast/broadcast_players_tab.dart
@@ -6,6 +6,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:lichess_mobile/src/model/broadcast/broadcast.dart';
 import 'package:lichess_mobile/src/model/broadcast/broadcast_providers.dart';
 import 'package:lichess_mobile/src/model/common/id.dart';
+import 'package:lichess_mobile/src/theme.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/view/broadcast/broadcast_player_results_screen.dart';
 import 'package:lichess_mobile/src/view/broadcast/broadcast_player_widget.dart';
@@ -187,10 +188,7 @@ class _PlayersListState extends ConsumerState<PlayersList> {
               );
             },
             child: ColoredBox(
-              color:
-                  index.isEven
-                      ? ColorScheme.of(context).surfaceContainer
-                      : ColorScheme.of(context).surfaceContainerHigh,
+              color: index.isEven ? context.lichessTheme.rowEven : context.lichessTheme.rowOdd,
               child: Row(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 children: [

diff --git a/lib/src/view/opening_explorer/opening_explorer_view.dart b/lib/src/view/opening_explorer/opening_explorer_view.dart
@@ -6,6 +6,7 @@ import 'package:lichess_mobile/src/model/opening_explorer/opening_explorer.dart'
 import 'package:lichess_mobile/src/model/opening_explorer/opening_explorer_preferences.dart';
 import 'package:lichess_mobile/src/model/opening_explorer/opening_explorer_repository.dart';
 import 'package:lichess_mobile/src/network/connectivity.dart';
+import 'package:lichess_mobile/src/theme.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/view/opening_explorer/opening_explorer_widgets.dart';
 import 'package:lichess_mobile/src/widgets/shimmer.dart';
@@ -117,10 +118,7 @@ class _OpeningExplorerState extends ConsumerState<OpeningExplorerView> {
               return OpeningExplorerGameTile(
                 key: Key('top-game-${topGames.get(index).id}'),
                 game: topGames.get(index),
-                color:
-                    index.isEven
-                        ? ColorScheme.of(context).surfaceContainerLow
-                        : ColorScheme.of(context).surfaceContainerHigh,
+                color: index.isEven ? context.lichessTheme.rowEven : context.lichessTheme.rowOdd,
                 ply: ply,
               );
             }, growable: false),
@@ -134,10 +132,7 @@ class _OpeningExplorerState extends ConsumerState<OpeningExplorerView> {
               return OpeningExplorerGameTile(
                 key: Key('recent-game-${recentGames.get(index).id}'),
                 game: recentGames.get(index),
-                color:
-                    index.isEven
-                        ? ColorScheme.of(context).surfaceContainerLow
-                        : ColorScheme.of(context).surfaceContainerHigh,
+                color: index.isEven ? context.lichessTheme.rowEven : context.lichessTheme.rowOdd,
                 ply: ply,
               );
             }, growable: false),

diff --git a/lib/src/view/opening_explorer/opening_explorer_widgets.dart b/lib/src/view/opening_explorer/opening_explorer_widgets.dart
@@ -5,6 +5,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:intl/intl.dart';
 import 'package:lichess_mobile/src/model/common/chess.dart';
 import 'package:lichess_mobile/src/model/opening_explorer/opening_explorer.dart';
+import 'package:lichess_mobile/src/theme.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/view/game/archived_game_screen.dart';
 import 'package:lichess_mobile/src/widgets/buttons.dart';
@@ -149,10 +150,7 @@ class OpeningExplorerMoveTable extends ConsumerWidget {
           final percentGames = ((move.games / games) * 100).round();
           return TableRow(
             decoration: BoxDecoration(
-              color:
-                  index.isEven
-                      ? ColorScheme.of(context).surfaceContainer
-                      : ColorScheme.of(context).surfaceContainerHigh,
+              color: index.isEven ? context.lichessTheme.rowEven : context.lichessTheme.rowOdd,
             ),
             children: [
               TableRowInkWell(
@@ -184,9 +182,7 @@ class OpeningExplorerMoveTable extends ConsumerWidget {
           TableRow(
             decoration: BoxDecoration(
               color:
-                  moves.length.isEven
-                      ? ColorScheme.of(context).surfaceContainerLow
-                      : ColorScheme.of(context).surfaceContainerHigh,
+                  moves.length.isEven ? context.lichessTheme.rowEven : context.lichessTheme.rowOdd,
             ),
             children: [
               Container(