diff --git a/lib/src/app.dart b/lib/src/app.dart index e169cfa3ab..04adac0eb2 100644 --- a/lib/src/app.dart +++ b/lib/src/app.dart @@ -2,6 +2,7 @@ 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'; +import 'package:flutter/services.dart' show SystemUiOverlayStyle; import 'package:flutter_native_splash/flutter_native_splash.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:lichess_mobile/l10n/l10n.dart'; @@ -130,21 +131,16 @@ class _AppState extends ConsumerState { final lightTheme = FlexThemeData.light( colors: flexSchemeLightColors, - surfaceMode: FlexSurfaceMode.highBackgroundLowScaffold, - blendLevel: 1, - appBarStyle: FlexAppBarStyle.background, - bottomAppBarElevation: 2.0, - visualDensity: FlexColorScheme.comfortablePlatformDensity, cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true), + surfaceMode: FlexSurfaceMode.highSurfaceLowScaffold, + blendLevel: 2, ); final darkTheme = FlexThemeData.dark( colors: flexSchemeDarkColors, surfaceMode: FlexSurfaceMode.highBackgroundLowScaffold, - blendLevel: 28, - appBarStyle: FlexAppBarStyle.background, - bottomAppBarElevation: 2.0, - visualDensity: FlexColorScheme.comfortablePlatformDensity, + blendLevel: 8, cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true), + appBarStyle: isIOS ? null : FlexAppBarStyle.scaffoldBackground, ); final lightCupertinoTheme = CupertinoThemeData( @@ -163,7 +159,7 @@ class _AppState extends ConsumerState { context, ).textTheme.navLargeTitleTextStyle.copyWith(color: Styles.cupertinoTitleColor), ), - scaffoldBackgroundColor: lightTheme.colorScheme.surface, + scaffoldBackgroundColor: lightTheme.scaffoldBackgroundColor, barBackgroundColor: lightTheme.appBarTheme.backgroundColor?.withValues( alpha: isTablet ? 1.0 : 0.9, ), @@ -186,68 +182,74 @@ class _AppState extends ConsumerState { context, ).textTheme.navLargeTitleTextStyle.copyWith(color: Styles.cupertinoTitleColor), ), - scaffoldBackgroundColor: darkTheme.colorScheme.surface, + scaffoldBackgroundColor: darkTheme.scaffoldBackgroundColor, barBackgroundColor: darkTheme.appBarTheme.backgroundColor?.withValues( alpha: isTablet ? 1.0 : 0.9, ), applyThemeToAll: true, ); - return MaterialApp( - localizationsDelegates: AppLocalizations.localizationsDelegates, - supportedLocales: kSupportedLocales, - onGenerateTitle: (BuildContext context) => 'lichess.org', - locale: generalPrefs.locale, - theme: lightTheme.copyWith( - cupertinoOverrideTheme: lightCupertinoTheme, - splashFactory: isIOS ? NoSplash.splashFactory : null, - textTheme: isIOS ? Typography.blackCupertino : null, - listTileTheme: ListTileTheme.of(context).copyWith( - titleTextStyle: isIOS ? lightCupertinoTheme.textTheme.textStyle : null, - subtitleTextStyle: isIOS ? lightCupertinoTheme.textTheme.textStyle : null, - leadingAndTrailingTextStyle: isIOS ? lightCupertinoTheme.textTheme.textStyle : null, - ), - navigationBarTheme: NavigationBarTheme.of( - context, - ).copyWith(height: remainingHeight < kSmallRemainingHeightLeftBoardThreshold ? 60 : null), - extensions: [lichessCustomColors.harmonized(lightTheme.colorScheme)], + return AnnotatedRegion( + value: FlexColorScheme.themedSystemNavigationBar( + context, + systemNavBarStyle: FlexSystemNavBarStyle.transparent, ), - darkTheme: darkTheme.copyWith( - cupertinoOverrideTheme: darkCupertinoTheme, - splashFactory: isIOS ? NoSplash.splashFactory : null, - textTheme: isIOS ? Typography.whiteCupertino : null, - listTileTheme: ListTileTheme.of(context).copyWith( - titleTextStyle: isIOS ? darkCupertinoTheme.textTheme.textStyle : null, - subtitleTextStyle: isIOS ? darkCupertinoTheme.textTheme.textStyle : null, - leadingAndTrailingTextStyle: isIOS ? darkCupertinoTheme.textTheme.textStyle : null, + child: MaterialApp( + localizationsDelegates: AppLocalizations.localizationsDelegates, + supportedLocales: kSupportedLocales, + onGenerateTitle: (BuildContext context) => 'lichess.org', + locale: generalPrefs.locale, + theme: lightTheme.copyWith( + cupertinoOverrideTheme: lightCupertinoTheme, + splashFactory: isIOS ? NoSplash.splashFactory : null, + textTheme: isIOS ? Typography.blackCupertino : null, + listTileTheme: ListTileTheme.of(context).copyWith( + titleTextStyle: isIOS ? lightCupertinoTheme.textTheme.textStyle : null, + subtitleTextStyle: isIOS ? lightCupertinoTheme.textTheme.textStyle : null, + leadingAndTrailingTextStyle: isIOS ? lightCupertinoTheme.textTheme.textStyle : null, + ), + navigationBarTheme: NavigationBarTheme.of( + context, + ).copyWith(height: remainingHeight < kSmallRemainingHeightLeftBoardThreshold ? 60 : null), + extensions: [lichessCustomColors.harmonized(lightTheme.colorScheme)], ), - navigationBarTheme: NavigationBarTheme.of( - context, - ).copyWith(height: remainingHeight < kSmallRemainingHeightLeftBoardThreshold ? 60 : null), - extensions: [lichessCustomColors.harmonized(darkTheme.colorScheme)], + darkTheme: darkTheme.copyWith( + cupertinoOverrideTheme: darkCupertinoTheme, + splashFactory: isIOS ? NoSplash.splashFactory : null, + textTheme: isIOS ? Typography.whiteCupertino : null, + listTileTheme: ListTileTheme.of(context).copyWith( + titleTextStyle: isIOS ? darkCupertinoTheme.textTheme.textStyle : null, + subtitleTextStyle: isIOS ? darkCupertinoTheme.textTheme.textStyle : null, + leadingAndTrailingTextStyle: isIOS ? darkCupertinoTheme.textTheme.textStyle : null, + ), + navigationBarTheme: NavigationBarTheme.of( + context, + ).copyWith(height: remainingHeight < kSmallRemainingHeightLeftBoardThreshold ? 60 : null), + extensions: [lichessCustomColors.harmonized(darkTheme.colorScheme)], + ), + themeMode: switch (generalPrefs.themeMode) { + BackgroundThemeMode.light => ThemeMode.light, + BackgroundThemeMode.dark => ThemeMode.dark, + BackgroundThemeMode.system => ThemeMode.system, + }, + builder: + Theme.of(context).platform == TargetPlatform.iOS + ? (context, child) { + // return CupertinoTheme( + // data: cupertinoThemeData, + // child: IconTheme.merge( + // data: IconThemeData( + // color: CupertinoTheme.of(context).textTheme.textStyle.color, + // ), + // child: Material(child: child), + // ), + // ); + return Material(child: child); + } + : null, + home: const BottomNavScaffold(), + navigatorObservers: [rootNavPageRouteObserver], ), - themeMode: switch (generalPrefs.themeMode) { - BackgroundThemeMode.light => ThemeMode.light, - BackgroundThemeMode.dark => ThemeMode.dark, - BackgroundThemeMode.system => ThemeMode.system, - }, - builder: - Theme.of(context).platform == TargetPlatform.iOS - ? (context, child) { - // return CupertinoTheme( - // data: cupertinoThemeData, - // child: IconTheme.merge( - // data: IconThemeData( - // color: CupertinoTheme.of(context).textTheme.textStyle.color, - // ), - // child: Material(child: child), - // ), - // ); - return Material(child: child); - } - : null, - home: const BottomNavScaffold(), - navigatorObservers: [rootNavPageRouteObserver], ); } } diff --git a/lib/src/view/broadcast/broadcast_list_screen.dart b/lib/src/view/broadcast/broadcast_list_screen.dart index 4e999f8b2e..18ede9cb17 100644 --- a/lib/src/view/broadcast/broadcast_list_screen.dart +++ b/lib/src/view/broadcast/broadcast_list_screen.dart @@ -44,9 +44,7 @@ class BroadcastListScreen extends StatelessWidget { navigationBar: CupertinoNavigationBar( middle: title, automaticBackgroundVisibility: false, - backgroundColor: Styles.cupertinoAppBarColor - .resolveFrom(context) - .withValues(alpha: 0.0), + backgroundColor: CupertinoTheme.of(context).barBackgroundColor.withValues(alpha: 0.0), border: null, ), child: const _Body(), diff --git a/lib/src/view/opening_explorer/opening_explorer_screen.dart b/lib/src/view/opening_explorer/opening_explorer_screen.dart index e8bd2fc5a4..b53e16a673 100644 --- a/lib/src/view/opening_explorer/opening_explorer_screen.dart +++ b/lib/src/view/opening_explorer/opening_explorer_screen.dart @@ -217,7 +217,7 @@ class _MoveList extends ConsumerWidget implements PreferredSizeWidget { inlineDecoration: Theme.of(context).platform == TargetPlatform.iOS ? BoxDecoration( - color: Styles.cupertinoAppBarColor.resolveFrom(context), + color: CupertinoTheme.of(context).barBackgroundColor, border: const Border(bottom: BorderSide(color: Color(0x4D000000), width: 0.0)), ) : null, diff --git a/lib/src/view/play/create_custom_game_screen.dart b/lib/src/view/play/create_custom_game_screen.dart index be799c53e1..e5e8ccb632 100644 --- a/lib/src/view/play/create_custom_game_screen.dart +++ b/lib/src/view/play/create_custom_game_screen.dart @@ -48,7 +48,7 @@ class CreateCustomGameScreen extends StatelessWidget { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( automaticBackgroundVisibility: false, - backgroundColor: Styles.cupertinoAppBarColor.resolveFrom(context).withValues(alpha: 0.0), + backgroundColor: CupertinoTheme.of(context).barBackgroundColor.withValues(alpha: 0.0), border: null, ), child: const _CupertinoBody(), @@ -210,14 +210,14 @@ class _TabView extends StatelessWidget { ? EdgeInsets.only(top: MediaQuery.paddingOf(context).top) : EdgeInsets.zero) + Styles.verticalBodyPadding; - final backgroundColor = Styles.cupertinoAppBarColor.resolveFrom(context); + final backgroundColor = CupertinoTheme.of(context).barBackgroundColor; return CustomScrollView( slivers: [ if (cupertinoTabSwitcher != null) PinnedHeaderSliver( child: ClipRect( child: BackdropFilter( - enabled: backgroundColor.alpha != 0xFF, + enabled: backgroundColor.a != 1, filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: AnimatedContainer( duration: const Duration(milliseconds: 200), diff --git a/lib/src/view/settings/app_theme_screen.dart b/lib/src/view/settings/app_theme_screen.dart index 15baeec9fa..cf6f0f72b4 100644 --- a/lib/src/view/settings/app_theme_screen.dart +++ b/lib/src/view/settings/app_theme_screen.dart @@ -2,10 +2,8 @@ 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/utils/l10n_context.dart'; import 'package:lichess_mobile/src/widgets/list.dart'; import 'package:lichess_mobile/src/widgets/platform.dart'; @@ -18,7 +16,7 @@ class AppThemeScreen extends StatelessWidget { } Widget _androidBuilder(BuildContext context) { - return Scaffold(appBar: AppBar(title: Text('Theme')), body: _Body()); + return Scaffold(appBar: AppBar(title: const Text('Theme')), body: _Body()); } Widget _iosBuilder(BuildContext context) { @@ -48,46 +46,44 @@ class _Body extends ConsumerWidget { final brightness = Theme.of(context).brightness; - return SafeArea( - child: ListView.separated( - itemBuilder: (context, index) { - final t = choices[index]; - final fsd = t.flexScheme; + return ListView.separated( + itemBuilder: (context, index) { + final t = choices[index]; + final fsd = t.flexScheme; - return AdaptiveListTile( - // selected: t == appTheme, - leading: SizedBox( - width: 52, - height: 36, - child: FlexThemeModeOptionButton( - flexSchemeColor: brightness == Brightness.light ? fsd.light : fsd.dark, - selected: false, - unselectedBorder: BorderSide.none, - selectedBorder: BorderSide(color: Theme.of(context).colorScheme.outline, width: 3), - backgroundColor: Theme.of(context).colorScheme.surface, - width: 26, - height: 18, - padding: EdgeInsets.zero, - borderRadius: 0, - optionButtonPadding: EdgeInsets.zero, - optionButtonMargin: EdgeInsets.zero, - optionButtonBorderRadius: 4, - ), + return AdaptiveListTile( + // selected: t == appTheme, + leading: SizedBox( + width: 52, + height: 36, + child: FlexThemeModeOptionButton( + flexSchemeColor: brightness == Brightness.light ? fsd.light : fsd.dark, + selected: false, + unselectedBorder: BorderSide.none, + selectedBorder: BorderSide(color: Theme.of(context).colorScheme.outline, width: 3), + backgroundColor: Theme.of(context).colorScheme.surface, + width: 26, + height: 18, + padding: EdgeInsets.zero, + borderRadius: 0, + optionButtonPadding: EdgeInsets.zero, + optionButtonMargin: EdgeInsets.zero, + optionButtonBorderRadius: 4, ), - trailing: t == appTheme ? checkedIcon : null, - title: Text(fsd.name), - onTap: () => onChanged(t), - ); - }, - separatorBuilder: - (_, __) => PlatformDivider( - height: 1, - // on iOS: 52 (leading) + 14 (default indent) + 16 (padding) - indent: Theme.of(context).platform == TargetPlatform.iOS ? 52 + 14 + 16 : null, - color: Theme.of(context).platform == TargetPlatform.iOS ? null : Colors.transparent, - ), - itemCount: choices.length, - ), + ), + trailing: t == appTheme ? checkedIcon : null, + title: Text(fsd.name), + onTap: () => onChanged(t), + ); + }, + separatorBuilder: + (_, __) => PlatformDivider( + height: 1, + // on iOS: 52 (leading) + 14 (default indent) + 16 (padding) + indent: Theme.of(context).platform == TargetPlatform.iOS ? 52 + 14 + 16 : null, + color: Theme.of(context).platform == TargetPlatform.iOS ? null : Colors.transparent, + ), + itemCount: choices.length, ); } } diff --git a/lib/src/view/settings/theme_screen.dart b/lib/src/view/settings/theme_screen.dart index 88e8392f37..253f3526b6 100644 --- a/lib/src/view/settings/theme_screen.dart +++ b/lib/src/view/settings/theme_screen.dart @@ -10,14 +10,12 @@ 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/styles/lichess_icons.dart'; import 'package:lichess_mobile/src/styles/styles.dart'; -import 'package:lichess_mobile/src/utils/color_palette.dart'; import 'package:lichess_mobile/src/utils/l10n_context.dart'; import 'package:lichess_mobile/src/utils/navigation.dart'; import 'package:lichess_mobile/src/utils/screen.dart'; import 'package:lichess_mobile/src/view/settings/app_theme_screen.dart'; import 'package:lichess_mobile/src/view/settings/board_theme_screen.dart'; import 'package:lichess_mobile/src/view/settings/piece_set_screen.dart'; -import 'package:lichess_mobile/src/widgets/adaptive_action_sheet.dart'; import 'package:lichess_mobile/src/widgets/adaptive_choice_picker.dart'; import 'package:lichess_mobile/src/widgets/list.dart'; import 'package:lichess_mobile/src/widgets/platform.dart'; @@ -34,9 +32,7 @@ class ThemeScreen extends StatelessWidget { (context) => CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( automaticBackgroundVisibility: false, - backgroundColor: Styles.cupertinoAppBarColor - .resolveFrom(context) - .withValues(alpha: 0.0), + backgroundColor: CupertinoTheme.of(context).barBackgroundColor.withValues(alpha: 0.0), border: null, ), child: const _Body(), @@ -112,7 +108,7 @@ class _BodyState extends ConsumerState<_Body> { final boardSize = isTabletOrLarger(context) ? 350.0 : 200.0; - final backgroundColor = Styles.cupertinoAppBarColor.resolveFrom(context); + final backgroundColor = CupertinoTheme.of(context).barBackgroundColor; return NotificationListener( onNotification: handleScrollNotification, @@ -122,7 +118,7 @@ class _BodyState extends ConsumerState<_Body> { PinnedHeaderSliver( child: ClipRect( child: BackdropFilter( - enabled: backgroundColor.alpha != 0xFF, + enabled: backgroundColor.a != 1, filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: AnimatedContainer( duration: const Duration(milliseconds: 200), @@ -171,46 +167,9 @@ class _BodyState extends ConsumerState<_Body> { ListSection( hasLeading: true, children: [ - // if (getCorePalette() != null) - // SettingsListTile( - // icon: const Icon(Icons.colorize_outlined), - // settingsLabel: const Text('Color scheme'), - // settingsValue: switch (generalPrefs.appThemeSeed) { - // AppThemeSeed.board => context.l10n.board, - // AppThemeSeed.system => context.l10n.mobileSystemColors, - // }, - // onTap: () { - // showAdaptiveActionSheet( - // context: context, - // actions: - // AppThemeSeed.values - // .where( - // (t) => t != AppThemeSeed.system || getCorePalette() != null, - // ) - // .map( - // (t) => BottomSheetAction( - // makeLabel: - // (context) => switch (t) { - // AppThemeSeed.board => Text(context.l10n.board), - // AppThemeSeed.system => Text( - // context.l10n.mobileSystemColors, - // ), - // }, - // onPressed: (context) { - // ref - // .read(generalPreferencesProvider.notifier) - // .setAppThemeSeed(t); - // }, - // dismissOnPress: true, - // ), - // ) - // .toList(), - // ); - // }, - // ), SettingsListTile( icon: const Icon(Icons.palette), - settingsLabel: Text('Theme'), + settingsLabel: const Text('Theme'), settingsValue: generalPrefs.appTheme.flexScheme.name, onTap: () { pushPlatformRoute( diff --git a/lib/src/widgets/list.dart b/lib/src/widgets/list.dart index fdc880f6d9..87e02b4980 100644 --- a/lib/src/widgets/list.dart +++ b/lib/src/widgets/list.dart @@ -182,7 +182,7 @@ class ListSection extends StatelessWidget { decoration: BoxDecoration( color: cupertinoBackgroundColor ?? - Theme.of(context).colorScheme.surfaceContainerHigh, + Theme.of(context).colorScheme.surfaceContainer, borderRadius: cupertinoBorderRadius ?? const BorderRadius.all(Radius.circular(10.0)), ),