Skip to content

Commit

Permalink
More wip on flex color scheme
Browse files Browse the repository at this point in the history
  • Loading branch information
@veloce
veloce committed Jan 15, 2025
1 parent 4478d5d commit 470e877
Show file tree
Hide file tree
Showing 7 changed files with 112 additions and 157 deletions.
128 changes: 65 additions & 63 deletions lib/src/app.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -130,21 +131,16 @@ class _AppState extends ConsumerState<Application> {

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(
Expand All @@ -163,7 +159,7 @@ class _AppState extends ConsumerState<Application> {
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,
),
Expand All @@ -186,68 +182,74 @@ class _AppState extends ConsumerState<Application> {
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<SystemUiOverlayStyle>(
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],
);
}
}
4 changes: 1 addition & 3 deletions lib/src/view/broadcast/broadcast_list_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
2 changes: 1 addition & 1 deletion lib/src/view/opening_explorer/opening_explorer_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
6 changes: 3 additions & 3 deletions lib/src/view/play/create_custom_game_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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),
Expand Down
78 changes: 37 additions & 41 deletions lib/src/view/settings/app_theme_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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) {
Expand Down Expand Up @@ -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,
);
}
}
Loading

0 comments on commit 470e877

Please sign in to comment.