More work on flex color scheme

lichess-org · Jan 15, 2025 · b1253c4 · b1253c4
1 parent 470e877
commit b1253c4
Show file tree

Hide file tree

Showing 16 changed files with 100 additions and 52 deletions.
diff --git a/lib/src/app.dart b/lib/src/app.dart
@@ -1,4 +1,3 @@
-import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -13,7 +12,6 @@ import 'package:lichess_mobile/src/model/common/preloaded_data.dart';
 import 'package:lichess_mobile/src/model/correspondence/correspondence_service.dart';
 import 'package:lichess_mobile/src/model/notifications/notification_service.dart';
 import 'package:lichess_mobile/src/model/settings/board_preferences.dart';
-import 'package:lichess_mobile/src/model/settings/brightness.dart';
 import 'package:lichess_mobile/src/model/settings/general_preferences.dart';
 import 'package:lichess_mobile/src/navigation.dart';
 import 'package:lichess_mobile/src/network/connectivity.dart';
@@ -121,24 +119,26 @@ class _AppState extends ConsumerState<Application> {
   @override
   Widget build(BuildContext context) {
     final generalPrefs = ref.watch(generalPreferencesProvider);
-    // final boardTheme = ref.watch(boardPreferencesProvider.select((state) => state.boardTheme));
+    final boardTheme = ref.watch(boardPreferencesProvider.select((state) => state.boardTheme));
     final isTablet = isTabletOrLarger(context);
     final isIOS = Theme.of(context).platform == TargetPlatform.iOS;
     final remainingHeight = estimateRemainingHeightLeftBoard(context);
 
-    final flexSchemeLightColors = generalPrefs.appTheme.flexScheme.light;
-    final flexSchemeDarkColors = generalPrefs.appTheme.flexScheme.dark;
+    final flexScheme = generalPrefs.appTheme.getFlexScheme(boardTheme);
+    final flexSchemeLightColors = flexScheme.light;
+    final flexSchemeDarkColors = flexScheme.dark;
 
     final lightTheme = FlexThemeData.light(
       colors: flexSchemeLightColors,
       cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true),
-      surfaceMode: FlexSurfaceMode.highSurfaceLowScaffold,
-      blendLevel: 2,
+      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
+      appBarStyle: isIOS ? null : FlexAppBarStyle.scaffoldBackground,
+      blendLevel: 6,
     );
     final darkTheme = FlexThemeData.dark(
       colors: flexSchemeDarkColors,
-      surfaceMode: FlexSurfaceMode.highBackgroundLowScaffold,
-      blendLevel: 8,
+      surfaceMode: FlexSurfaceMode.highScaffoldLevelSurface,
+      blendLevel: 12,
       cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true),
       appBarStyle: isIOS ? null : FlexAppBarStyle.scaffoldBackground,
     );

diff --git a/lib/src/model/settings/board_preferences.dart b/lib/src/model/settings/board_preferences.dart
@@ -1,6 +1,6 @@
 import 'package:chessground/chessground.dart';
+import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:lichess_mobile/l10n/l10n.dart';
 import 'package:lichess_mobile/src/model/settings/preferences_storage.dart';
@@ -292,6 +292,46 @@ enum BoardTheme {
     }
   }
 
+  FlexSchemeData get flexScheme {
+    final lightScheme = SeedColorScheme.fromSeeds(
+      primaryKey: colors.darkSquare,
+      secondaryKey: colors.lightSquare,
+      brightness: Brightness.light,
+    );
+    final darkScheme = SeedColorScheme.fromSeeds(
+      primaryKey: colors.darkSquare,
+      secondaryKey: colors.lightSquare,
+      brightness: Brightness.dark,
+    );
+    return FlexSchemeData(
+      name: 'Chessboard',
+      description: 'Chessboard based theme: $label',
+      light: FlexSchemeColor(
+        primary: lightScheme.primary,
+        primaryContainer: lightScheme.primaryContainer,
+        secondary: lightScheme.secondary,
+        secondaryContainer: lightScheme.secondaryContainer,
+        tertiary: lightScheme.tertiary,
+        tertiaryContainer: lightScheme.tertiaryContainer,
+        error: lightScheme.error,
+        errorContainer: lightScheme.errorContainer,
+      ),
+      dark: FlexSchemeColor(
+        primary: darkScheme.primary,
+        primaryContainer: darkScheme.primaryContainer,
+        primaryLightRef: lightScheme.primary,
+        secondary: darkScheme.secondary,
+        secondaryContainer: darkScheme.secondaryContainer,
+        secondaryLightRef: lightScheme.secondary,
+        tertiary: darkScheme.tertiary,
+        tertiaryContainer: darkScheme.tertiaryContainer,
+        tertiaryLightRef: lightScheme.tertiary,
+        error: darkScheme.error,
+        errorContainer: darkScheme.errorContainer,
+      ),
+    );
+  }
+
   Widget get thumbnail =>
       this == BoardTheme.system
           ? SizedBox(

diff --git a/lib/src/model/settings/general_preferences.dart b/lib/src/model/settings/general_preferences.dart
@@ -2,6 +2,7 @@ import 'dart:ui' show Locale;
 
 import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:lichess_mobile/src/model/settings/board_preferences.dart';
 import 'package:lichess_mobile/src/model/settings/preferences_storage.dart';
 import 'package:lichess_mobile/src/utils/color_palette.dart';
 import 'package:lichess_mobile/src/utils/json.dart';
@@ -105,6 +106,9 @@ enum AppTheme {
   /// The app theme is based on the user's system theme (only available on Android 10+).
   system,
 
+  /// The app theme is based on the chess board
+  board,
+
   /// Below values from [FlexScheme]
   blue,
   indigo,
@@ -162,8 +166,12 @@ enum AppTheme {
 
   static final _flexSchemesNameMap = FlexScheme.values.asNameMap();
 
-  FlexSchemeData get flexScheme =>
-      this == AppTheme.system ? getSystemScheme()! : _flexSchemesNameMap[name]!.data;
+  FlexSchemeData getFlexScheme(BoardTheme boardTheme) =>
+      this == AppTheme.system
+          ? getSystemScheme()!
+          : this == AppTheme.board
+          ? boardTheme.flexScheme
+          : _flexSchemesNameMap[name]!.data;
 }
 
 /// Describes the background theme of the app.

diff --git a/lib/src/view/play/create_game_options.dart b/lib/src/view/play/create_game_options.dart
@@ -110,6 +110,13 @@ class _CreateGamePlatformButton extends StatelessWidget {
           title: Text(label, style: Styles.mainListTileTitle),
           onTap: onTap,
         )
-        : ElevatedButton.icon(onPressed: onTap, icon: Icon(icon), label: Text(label));
+        : OutlinedButton.icon(
+          onPressed: onTap,
+          icon: Icon(icon),
+          label: Text(label, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
+          style: const ButtonStyle(
+            padding: WidgetStatePropertyAll(EdgeInsets.symmetric(vertical: 8.0)),
+          ),
+        );
   }
 }
diff --git a/lib/src/view/play/quick_game_button.dart b/lib/src/view/play/quick_game_button.dart
@@ -6,7 +6,6 @@ import 'package:lichess_mobile/src/model/auth/auth_session.dart';
 import 'package:lichess_mobile/src/model/lobby/game_seek.dart';
 import 'package:lichess_mobile/src/model/lobby/game_setup_preferences.dart';
 import 'package:lichess_mobile/src/network/connectivity.dart';
-import 'package:lichess_mobile/src/styles/styles.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/utils/navigation.dart';
 import 'package:lichess_mobile/src/view/game/game_screen.dart';
@@ -22,6 +21,7 @@ class QuickGameButton extends ConsumerWidget {
     final playPrefs = ref.watch(gameSetupPreferencesProvider);
     final session = ref.watch(authSessionProvider);
     final isOnline = ref.watch(connectivityChangesProvider).valueOrNull?.isOnline ?? false;
+    const buttonTextStyle = TextStyle(fontSize: 18, fontWeight: FontWeight.bold);
 
     return Row(
       children: [
@@ -88,7 +88,7 @@ class QuickGameButton extends ConsumerWidget {
                               );
                             }
                             : null,
-                    child: Text(context.l10n.play, style: Styles.bold),
+                    child: Text(context.l10n.play, style: buttonTextStyle),
                   )
                   : FilledButton(
                     onPressed:
@@ -109,7 +109,7 @@ class QuickGameButton extends ConsumerWidget {
                             : null,
                     child: Padding(
                       padding: const EdgeInsets.symmetric(vertical: 8.0),
-                      child: Text(context.l10n.play, style: Styles.bold),
+                      child: Text(context.l10n.play, style: buttonTextStyle),
                     ),
                   ),
         ),

diff --git a/lib/src/view/play/quick_game_matrix.dart b/lib/src/view/play/quick_game_matrix.dart
@@ -142,7 +142,7 @@ class _ChoiceChip extends StatefulWidget {
 class _ChoiceChipState extends State<_ChoiceChip> {
   @override
   Widget build(BuildContext context) {
-    final cardColor = Theme.of(context).colorScheme.surfaceContainerHigh.withValues(alpha: 0.7);
+    final cardColor = Theme.of(context).colorScheme.surfaceContainerHighest.withValues(alpha: 0.7);
 
     return Opacity(
       opacity: widget.onTap != null ? 1.0 : 0.5,

diff --git a/lib/src/view/play/time_control_modal.dart b/lib/src/view/play/time_control_modal.dart
@@ -240,10 +240,7 @@ class _ChoiceChip extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color:
-            Theme.of(context).platform == TargetPlatform.iOS
-                ? CupertinoColors.secondarySystemGroupedBackground.resolveFrom(context)
-                : Theme.of(context).colorScheme.surfaceContainerHighest,
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
         borderRadius: const BorderRadius.all(Radius.circular(5.0)),
         border:
             selected

diff --git a/lib/src/view/puzzle/dashboard_screen.dart b/lib/src/view/puzzle/dashboard_screen.dart
@@ -164,7 +164,7 @@ class PuzzleChart extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final radarColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.5);
-    final chartColor = Theme.of(context).colorScheme.tertiary;
+    final chartColor = Theme.of(context).colorScheme.secondary;
     return RadarChart(
       RadarChartData(
         radarBorderData: BorderSide(width: 0.5, color: radarColor),

diff --git a/lib/src/view/settings/app_theme_screen.dart b/lib/src/view/settings/app_theme_screen.dart
@@ -2,6 +2,7 @@ import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lichess_mobile/src/model/settings/board_preferences.dart';
 import 'package:lichess_mobile/src/model/settings/general_preferences.dart';
 import 'package:lichess_mobile/src/utils/color_palette.dart';
 import 'package:lichess_mobile/src/widgets/list.dart';
@@ -28,6 +29,7 @@ class _Body extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final appTheme = ref.watch(generalPreferencesProvider.select((p) => p.appTheme));
+    final boardPrefs = ref.watch(boardPreferencesProvider);
 
     final hasSystemColors = getCorePalette() != null;
 
@@ -49,7 +51,7 @@ class _Body extends ConsumerWidget {
     return ListView.separated(
       itemBuilder: (context, index) {
         final t = choices[index];
-        final fsd = t.flexScheme;
+        final fsd = t.getFlexScheme(boardPrefs.boardTheme);
 
         return AdaptiveListTile(
           // selected: t == appTheme,

diff --git a/lib/src/view/settings/theme_screen.dart b/lib/src/view/settings/theme_screen.dart
@@ -170,7 +170,7 @@ class _BodyState extends ConsumerState<_Body> {
                   SettingsListTile(
                     icon: const Icon(Icons.palette),
                     settingsLabel: const Text('Theme'),
-                    settingsValue: generalPrefs.appTheme.flexScheme.name,
+                    settingsValue: generalPrefs.appTheme.getFlexScheme(boardPrefs.boardTheme).name,
                     onTap: () {
                       pushPlatformRoute(
                         context,

diff --git a/lib/src/view/study/study_gamebook.dart b/lib/src/view/study/study_gamebook.dart
@@ -5,7 +5,6 @@ import 'package:lichess_mobile/src/model/common/id.dart';
 import 'package:lichess_mobile/src/model/study/study_controller.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/widgets/buttons.dart';
-import 'package:lichess_mobile/src/widgets/platform.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class StudyGamebook extends StatelessWidget {
@@ -20,14 +19,11 @@ class StudyGamebook extends StatelessWidget {
       child: Column(
         children: [
           Expanded(
-            child: PlatformCard(
-              margin: const EdgeInsets.all(8.0),
-              child: Padding(
-                padding: const EdgeInsets.all(10),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [_Comment(id: id), _Hint(id: id)],
-                ),
+            child: Padding(
+              padding: const EdgeInsets.all(10.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [_Comment(id: id), _Hint(id: id)],
               ),
             ),
           ),

diff --git a/lib/src/view/user/perf_stats_screen.dart b/lib/src/view/user/perf_stats_screen.dart
@@ -397,7 +397,7 @@ class _UserGameWidget extends StatelessWidget {
     // (Return a button? Wrap with InkWell?)
     const defaultDateFontSize = 16.0;
     final defaultDateStyle = TextStyle(
-      color: Theme.of(context).colorScheme.tertiary,
+      color: Theme.of(context).colorScheme.secondary,
       fontSize: defaultDateFontSize,
     );
 
@@ -720,7 +720,7 @@ class _EloChartState extends State<_EloChart> {
   @override
   Widget build(BuildContext context) {
     final borderColor = Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.5);
-    final chartColor = Theme.of(context).colorScheme.tertiary;
+    final chartColor = Theme.of(context).colorScheme.secondary;
     final chartDateFormatter = switch (_selectedRange) {
       DateRange.oneWeek => DateFormat.MMMd(),
       DateRange.oneMonth => DateFormat.MMMd(),
@@ -883,7 +883,7 @@ class _RangeButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final chartColor = Theme.of(context).colorScheme.tertiary;
+    final chartColor = Theme.of(context).colorScheme.secondary;
 
     return PlatformCard(
       color: selected ? chartColor.withValues(alpha: 0.2) : null,

diff --git a/lib/src/widgets/adaptive_bottom_sheet.dart b/lib/src/widgets/adaptive_bottom_sheet.dart
@@ -28,13 +28,6 @@ Future<T?> showAdaptiveBottomSheet<T>({
             )
             : null,
     constraints: constraints,
-    backgroundColor:
-        Theme.of(context).platform == TargetPlatform.iOS
-            ? CupertinoDynamicColor.resolve(
-              CupertinoColors.tertiarySystemGroupedBackground,
-              context,
-            )
-            : null,
     elevation: Theme.of(context).platform == TargetPlatform.iOS ? 0 : null,
     builder: builder,
   );
@@ -85,9 +78,6 @@ class BottomSheetContextMenuAction extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return PlatformListTile(
-      cupertinoBackgroundColor: CupertinoColors.tertiarySystemGroupedBackground.resolveFrom(
-        context,
-      ),
       leading: Icon(icon),
       title: child,
       onTap: () {

diff --git a/lib/src/widgets/list.dart b/lib/src/widgets/list.dart
@@ -72,7 +72,8 @@ class ListSection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    switch (Theme.of(context).platform) {
+    final theme = Theme.of(context);
+    switch (theme.platform) {
       case TargetPlatform.android:
         return _isLoading
             ? Padding(
@@ -182,7 +183,9 @@ class ListSection extends StatelessWidget {
                     decoration: BoxDecoration(
                       color:
                           cupertinoBackgroundColor ??
-                          Theme.of(context).colorScheme.surfaceContainer,
+                          (theme.brightness == Brightness.light
+                              ? theme.colorScheme.surfaceContainerLowest
+                              : theme.colorScheme.surfaceContainerHighest),
                       borderRadius:
                           cupertinoBorderRadius ?? const BorderRadius.all(Radius.circular(10.0)),
                     ),
@@ -196,7 +199,7 @@ class ListSection extends StatelessWidget {
               ),
             );
       default:
-        assert(false, 'Unexpected platform ${Theme.of(context).platform}');
+        assert(false, 'Unexpected platform ${theme.platform}');
         return const SizedBox.shrink();
     }
   }
@@ -335,6 +338,7 @@ class PlatformListTile extends StatelessWidget {
                   selected == true
                       ? CupertinoColors.systemGrey4.resolveFrom(context)
                       : cupertinoBackgroundColor,
+              // backgroundColorActivated: Theme.of(context).colorScheme.surfaceContainerHighest,
               leading: leading,
               title:
                   harmonizeCupertinoTitleStyle

diff --git a/lib/src/widgets/platform.dart b/lib/src/widgets/platform.dart
@@ -102,7 +102,7 @@ class PlatformCard extends StatelessWidget {
                 clipBehavior: clipBehavior,
                 child: child,
               )
-              : Card(
+              : Card.filled(
                 shape:
                     borderRadius != null
                         ? RoundedRectangleBorder(borderRadius: borderRadius!)
@@ -111,7 +111,7 @@ class PlatformCard extends StatelessWidget {
                 shadowColor: shadowColor,
                 semanticContainer: semanticContainer,
                 elevation: elevation,
-                margin: margin,
+                margin: margin ?? EdgeInsets.zero,
                 clipBehavior: clipBehavior,
                 child: child,
               ),