Skip to content

Cupertino theme #650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 26, 2024
Merged

Cupertino theme #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0d84cc8
WIP on improving cupertino theme
veloce Apr 23, 2024
3e50c44
More wip on cupertino theme
veloce Apr 25, 2024
674ffb4
More wip on cupertino theme
veloce Apr 25, 2024
5d1d9e9
More work on cupertino theme
veloce Apr 26, 2024
74727f5
Make cupertino app bar a little more transparent
veloce Apr 26, 2024
f6571a5
Fixes
veloce Apr 26, 2024
13bb8a4
Merge branch 'main' into cupertino-theme
veloce Apr 26, 2024
2af0cbb
Restore profile screen without slivers
veloce Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions lib/src/app.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ 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/notification_service.dart';
import 'package:lichess_mobile/src/styles/lichess_colors.dart';
import 'package:lichess_mobile/src/styles/styles.dart';
import 'package:lichess_mobile/src/utils/connectivity.dart';
import 'package:lichess_mobile/src/utils/layout.dart';
Expand Down Expand Up @@ -131,45 +130,58 @@ class _AppState extends ConsumerState<Application> {
brightness: brightness,
);

final theme = Theme.of(context);
final cupertinoThemeData = CupertinoThemeData(
primaryColor: Styles.cupertinoPrimaryColor,
brightness: brightness,
textTheme: CupertinoTheme.of(context).textTheme.copyWith(
primaryColor: Styles.cupertinoPrimaryColor,
textStyle: CupertinoTheme.of(context)
.textTheme
.textStyle
.copyWith(color: Styles.cupertinoLabelColor),
navTitleTextStyle: CupertinoTheme.of(context)
.textTheme
.navTitleTextStyle
.copyWith(color: Styles.cupertinoTitleColor),
navLargeTitleTextStyle: CupertinoTheme.of(context)
.textTheme
.navLargeTitleTextStyle
.copyWith(color: Styles.cupertinoTitleColor),
),
scaffoldBackgroundColor: Styles.cupertinoScaffoldColor,
barBackgroundColor: Styles.cupertinoAppBarColor,
);

return MaterialApp(
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: kSupportedLocales,
onGenerateTitle: (BuildContext context) => 'lichess.org',
theme: ThemeData.from(
colorScheme: colorScheme,
textTheme: theme.platform == TargetPlatform.iOS
textTheme: Theme.of(context).platform == TargetPlatform.iOS
? brightness == Brightness.light
? Typography.blackCupertino
: Typography.whiteCupertino
: Styles.whiteCupertinoTextTheme
: null,
).copyWith(
cupertinoOverrideTheme: cupertinoThemeData,
navigationBarTheme: NavigationBarTheme.of(context).copyWith(
height: remainingHeight < kSmallRemainingHeightLeftBoardThreshold
? 60
: null,
),
extensions: [
if (theme.platform == TargetPlatform.android)
if (Theme.of(context).platform == TargetPlatform.android)
lichessCustomColors.harmonized(colorScheme)
else
lichessCustomColors,
],
),
themeMode: themeMode,
builder: theme.platform == TargetPlatform.iOS
builder: Theme.of(context).platform == TargetPlatform.iOS
? (context, child) {
return CupertinoTheme(
data: CupertinoThemeData(
primaryColor: brightness == Brightness.light
? LichessColors.primary
: const Color(0xFF3692E7),
brightness: brightness,
scaffoldBackgroundColor: brightness == Brightness.light
? CupertinoColors.systemGroupedBackground
: null,
),
data: cupertinoThemeData,
child: IconTheme(
// This is needed to avoid the icon color being overridden by the cupertino theme (blue)
data: IconTheme.of(context),
Expand Down
140 changes: 134 additions & 6 deletions lib/src/styles/styles.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,11 @@ abstract class Styles {
fontSize: 18.0,
fontWeight: FontWeight.w600,
);
static TextStyle get sectionTitle => TextStyle(
fontSize: defaultTargetPlatform == TargetPlatform.iOS ? 20 : 18,
letterSpacing:
defaultTargetPlatform == TargetPlatform.iOS ? -0.41 : null,
fontWeight: FontWeight.bold,
);
static final sectionTitle = TextStyle(
fontSize: defaultTargetPlatform == TargetPlatform.iOS ? 20 : 18,
letterSpacing: defaultTargetPlatform == TargetPlatform.iOS ? -0.41 : null,
fontWeight: FontWeight.bold,
);
static const boardPreviewTitle = TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
Expand Down Expand Up @@ -56,6 +55,135 @@ abstract class Styles {
defaultTargetPlatform == TargetPlatform.iOS
? CupertinoColors.secondaryLabel.resolveFrom(context)
: null;
static const cupertinoAppBarColor = CupertinoDynamicColor.withBrightness(
color: Color(0xE6F9F9F9),
darkColor: Color(0xE61D1D1D),
);
static const cupertinoScaffoldColor = CupertinoDynamicColor.withBrightness(
color: Color.fromARGB(255, 242, 242, 247),
darkColor: Color.fromARGB(255, 20, 20, 21),
);
static const cupertinoPrimaryColor = CupertinoDynamicColor.withBrightness(
color: LichessColors.primary,
darkColor: Color(0xFF3692E7),
);

static const _cupertinoDarkLabelColor = Color(0xFFDCDCDC);
static const cupertinoLabelColor = CupertinoDynamicColor.withBrightness(
color: Color(0xFF000000),
darkColor: _cupertinoDarkLabelColor,
);
static const cupertinoTitleColor = CupertinoDynamicColor.withBrightness(
color: Color(0xFF000000),
darkColor: Color(0xFFF5F5F5),
);
static const cupertinoCardColor = CupertinoDynamicColor.withBrightness(
color: Color(0xFFFFFFFF),
darkColor: Color.fromARGB(255, 36, 36, 37),
);
static const cupertinoSeparatorColor = CupertinoDynamicColor.withBrightness(
debugLabel: 'separator',
color: Color.fromARGB(73, 60, 60, 67),
darkColor: Color.fromARGB(153, 101, 101, 105),
);

/// A Material Design text theme with light glyphs based on San Francisco.
///
/// This [TextTheme] provides color but not geometry (font size, weight, etc).
///
/// This theme uses the iOS version of the font names.
static const TextTheme whiteCupertinoTextTheme = TextTheme(
displayLarge: TextStyle(
debugLabel: 'whiteCupertino displayLarge',
fontFamily: 'CupertinoSystemDisplay',
color: Color(0xFFF5F5F5),
decoration: TextDecoration.none,
),
displayMedium: TextStyle(
debugLabel: 'whiteCupertino displayMedium',
fontFamily: 'CupertinoSystemDisplay',
color: Color(0xFFF5F5F5),
decoration: TextDecoration.none,
),
displaySmall: TextStyle(
debugLabel: 'whiteCupertino displaySmall',
fontFamily: 'CupertinoSystemDisplay',
color: Color(0xFFF5F5F5),
decoration: TextDecoration.none,
),
headlineLarge: TextStyle(
debugLabel: 'whiteCupertino headlineLarge',
fontFamily: 'CupertinoSystemDisplay',
color: Color(0xFFF5F5F5),
decoration: TextDecoration.none,
),
headlineMedium: TextStyle(
debugLabel: 'whiteCupertino headlineMedium',
fontFamily: 'CupertinoSystemDisplay',
color: Color(0xFFF5F5F5),
decoration: TextDecoration.none,
),
headlineSmall: TextStyle(
debugLabel: 'whiteCupertino headlineSmall',
fontFamily: 'CupertinoSystemDisplay',
color: Color(0xFFF5F5F5),
decoration: TextDecoration.none,
),
titleLarge: TextStyle(
debugLabel: 'whiteCupertino titleLarge',
fontFamily: 'CupertinoSystemDisplay',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
titleMedium: TextStyle(
debugLabel: 'whiteCupertino titleMedium',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
titleSmall: TextStyle(
debugLabel: 'whiteCupertino titleSmall',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
bodyLarge: TextStyle(
debugLabel: 'whiteCupertino bodyLarge',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
bodyMedium: TextStyle(
debugLabel: 'whiteCupertino bodyMedium',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
bodySmall: TextStyle(
debugLabel: 'whiteCupertino bodySmall',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
labelLarge: TextStyle(
debugLabel: 'whiteCupertino labelLarge',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
labelMedium: TextStyle(
debugLabel: 'whiteCupertino labelMedium',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
labelSmall: TextStyle(
debugLabel: 'whiteCupertino labelSmall',
fontFamily: 'CupertinoSystemText',
color: _cupertinoDarkLabelColor,
decoration: TextDecoration.none,
),
);

/// Gets horizontal padding according to platform.
static const horizontalBodyPadding = EdgeInsets.symmetric(horizontal: 16.0);
Expand Down
4 changes: 3 additions & 1 deletion lib/src/view/account/profile_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/cupertino.dart'
hide CupertinoNavigationBar, CupertinoPageScaffold;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lichess_mobile/src/model/account/account_repository.dart';
Expand All @@ -11,6 +12,7 @@ import 'package:lichess_mobile/src/view/user/recent_games.dart';
import 'package:lichess_mobile/src/view/user/user_activity.dart';
import 'package:lichess_mobile/src/view/user/user_profile.dart';
import 'package:lichess_mobile/src/widgets/buttons.dart';
import 'package:lichess_mobile/src/widgets/cupertino.dart';
import 'package:lichess_mobile/src/widgets/feedback.dart';
import 'package:lichess_mobile/src/widgets/platform.dart';
import 'package:lichess_mobile/src/widgets/shimmer.dart';
Expand Down
2 changes: 2 additions & 0 deletions lib/src/view/analysis/analysis_position_choice_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ class AnalysisPositionChoiceScreen extends StatelessWidget {
Widget _iosBuilder(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: Styles.cupertinoScaffoldColor.resolveFrom(context),
border: null,
middle: Text(context.l10n.analysis),
),
child: const _Body(),
Expand Down
2 changes: 2 additions & 0 deletions lib/src/view/analysis/analysis_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,8 @@ class _LoadedAnalysisScreen extends ConsumerWidget {
return CupertinoPageScaffold(
resizeToAvoidBottomInset: false,
navigationBar: CupertinoNavigationBar(
backgroundColor: Styles.cupertinoScaffoldColor.resolveFrom(context),
border: null,
padding: Styles.cupertinoAppBarTrailingWidgetPadding,
middle: _Title(options: options, title: title),
trailing: Row(
Expand Down
5 changes: 4 additions & 1 deletion lib/src/view/game/archived_game_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lichess_mobile/src/constants.dart';
import 'package:lichess_mobile/src/model/analysis/analysis_controller.dart';
import 'package:lichess_mobile/src/model/game/archived_game.dart';
import 'package:lichess_mobile/src/styles/styles.dart';
import 'package:lichess_mobile/src/utils/chessground_compat.dart';
import 'package:lichess_mobile/src/utils/l10n_context.dart';
import 'package:lichess_mobile/src/utils/navigation.dart';
Expand Down Expand Up @@ -66,6 +67,8 @@ class ArchivedGameScreen extends ConsumerWidget {
Widget _iosBuilder(BuildContext context, WidgetRef ref) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
backgroundColor: Styles.cupertinoScaffoldColor.resolveFrom(context),
border: null,
middle: _GameTitle(gameData: gameData),
padding: const EdgeInsetsDirectional.only(end: 16.0),
trailing: ToggleSoundButton(),
Expand Down Expand Up @@ -241,7 +244,7 @@ class _BottomBar extends ConsumerWidget {

return Container(
color: Theme.of(context).platform == TargetPlatform.iOS
? CupertinoTheme.of(context).barBackgroundColor
? null
: Theme.of(context).bottomAppBarTheme.color,
child: SafeArea(
top: false,
Expand Down
2 changes: 1 addition & 1 deletion lib/src/view/game/game_body.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -600,7 +600,7 @@ class _GameBottomBar extends ConsumerWidget {

return Container(
color: Theme.of(context).platform == TargetPlatform.iOS
? CupertinoTheme.of(context).barBackgroundColor
? null
: Theme.of(context).bottomAppBarTheme.color,
child: SafeArea(
top: false,
Expand Down
2 changes: 2 additions & 0 deletions lib/src/view/game/game_common_widgets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ class GameCupertinoNavBar extends ConsumerWidget
: const AsyncValue.data(true);

return CupertinoNavigationBar(
backgroundColor: Styles.cupertinoScaffoldColor.resolveFrom(context),
border: null,
padding: Styles.cupertinoAppBarTrailingWidgetPadding,
leading: shouldPreventGoingBackAsync.maybeWhen<Widget?>(
data: (prevent) => prevent ? pingRating : null,
Expand Down
6 changes: 4 additions & 2 deletions lib/src/view/home/home_tab_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:fast_immutable_collections/fast_immutable_collections.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/cupertino.dart'
hide CupertinoPageScaffold, CupertinoSliverNavigationBar;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lichess_mobile/src/model/account/account_repository.dart';
Expand All @@ -24,6 +25,7 @@ import 'package:lichess_mobile/src/view/user/player_screen.dart';
import 'package:lichess_mobile/src/view/user/recent_games.dart';
import 'package:lichess_mobile/src/widgets/adaptive_bottom_sheet.dart';
import 'package:lichess_mobile/src/widgets/buttons.dart';
import 'package:lichess_mobile/src/widgets/cupertino.dart';
import 'package:lichess_mobile/src/widgets/feedback.dart';
import 'package:lichess_mobile/src/widgets/platform.dart';
import 'package:lichess_mobile/src/widgets/user_full_name.dart';
Expand Down Expand Up @@ -418,7 +420,7 @@ class _QuickGameButton extends ConsumerWidget {
Styles.horizontalBodyPadding.add(const EdgeInsets.only(top: 6.0)),
child: PlatformCard(
elevation:
Theme.of(context).platform == TargetPlatform.iOS ? 0.2 : null,
Theme.of(context).platform == TargetPlatform.iOS ? 0.1 : null,
child: Row(
children: [
SizedBox(
Expand Down
4 changes: 3 additions & 1 deletion lib/src/view/play/create_custom_game_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import 'dart:async';

import 'package:dartchess/dartchess.dart';
import 'package:deep_pick/deep_pick.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/cupertino.dart'
hide CupertinoNavigationBar, CupertinoPageScaffold;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
Expand All @@ -27,6 +28,7 @@ import 'package:lichess_mobile/src/view/game/standalone_game_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/buttons.dart';
import 'package:lichess_mobile/src/widgets/cupertino.dart';
import 'package:lichess_mobile/src/widgets/expanded_section.dart';
import 'package:lichess_mobile/src/widgets/feedback.dart';
import 'package:lichess_mobile/src/widgets/list.dart';
Expand Down
2 changes: 1 addition & 1 deletion lib/src/view/puzzle/dashboard_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import 'package:collection/collection.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http/http.dart' show ClientException;
Expand All @@ -13,6 +12,7 @@ import 'package:lichess_mobile/src/utils/l10n_context.dart';
import 'package:lichess_mobile/src/utils/string.dart';
import 'package:lichess_mobile/src/widgets/adaptive_choice_picker.dart';
import 'package:lichess_mobile/src/widgets/buttons.dart';
import 'package:lichess_mobile/src/widgets/cupertino.dart';
import 'package:lichess_mobile/src/widgets/list.dart';
import 'package:lichess_mobile/src/widgets/shimmer.dart';
import 'package:lichess_mobile/src/widgets/stat_card.dart';
Expand Down
4 changes: 3 additions & 1 deletion lib/src/view/puzzle/opening_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import 'package:fast_immutable_collections/fast_immutable_collections.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/cupertino.dart'
hide CupertinoNavigationBar, CupertinoPageScaffold;
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lichess_mobile/src/model/puzzle/puzzle_angle.dart';
Expand All @@ -9,6 +10,7 @@ import 'package:lichess_mobile/src/styles/styles.dart';
import 'package:lichess_mobile/src/utils/connectivity.dart';
import 'package:lichess_mobile/src/utils/l10n_context.dart';
import 'package:lichess_mobile/src/utils/navigation.dart';
import 'package:lichess_mobile/src/widgets/cupertino.dart';
import 'package:lichess_mobile/src/widgets/list.dart';
import 'package:lichess_mobile/src/widgets/platform.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
Expand Down
Loading