From 862c4b8faf2c751d803e373e29981a116bf08ed5 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Thu, 16 Mar 2023 13:30:17 +0600 Subject: [PATCH] feat: use system color scheme --- .../settings/color_scheme_picker_dialog.dart | 117 ++++++++---------- lib/main.dart | 2 + lib/pages/settings/settings.dart | 10 +- lib/provider/user_preferences_provider.dart | 4 +- pubspec.yaml | 1 - 5 files changed, 59 insertions(+), 75 deletions(-) diff --git a/lib/components/settings/color_scheme_picker_dialog.dart b/lib/components/settings/color_scheme_picker_dialog.dart index c7e4988f7..782d50389 100644 --- a/lib/components/settings/color_scheme_picker_dialog.dart +++ b/lib/components/settings/color_scheme_picker_dialog.dart @@ -3,8 +3,10 @@ import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:spotube/provider/user_preferences_provider.dart'; +import 'package:system_theme/system_theme.dart'; -final colorsMap = { +final Map colorsMap = { + "System": SystemTheme.accentColor.accent, "Red": Colors.red, "Pink": Colors.pink, "Purple": Colors.purple, @@ -23,15 +25,8 @@ final colorsMap = { "Brown": Colors.brown, }; -enum ColorSchemeType { - accent, - background, -} - class ColorSchemePickerDialog extends HookConsumerWidget { - final ColorSchemeType schemeType; - const ColorSchemePickerDialog({required this.schemeType, Key? key}) - : super(key: key); + const ColorSchemePickerDialog({Key? key}) : super(key: key); @override Widget build(BuildContext context, ref) { @@ -44,20 +39,12 @@ class ColorSchemePickerDialog extends HookConsumerWidget { ).key); onOk() { - switch (schemeType) { - case ColorSchemeType.accent: - preferences.setAccentColorScheme(colorsMap[active.value]!); - break; - default: - preferences.setBackgroundColorScheme( - colorsMap[active.value]!, - ); - } + preferences.setAccentColorScheme(colorsMap[active.value]!); Navigator.pop(context); } return AlertDialog( - title: Text("Pick ${schemeType.name} color scheme"), + title: const Text("Pick color scheme"), actions: [ OutlinedButton( child: const Text("Cancel"), @@ -96,7 +83,7 @@ class ColorSchemePickerDialog extends HookConsumerWidget { } class ColorTile extends StatelessWidget { - final MaterialColor color; + final Color color; final bool isActive; final void Function()? onPressed; final String? tooltip; @@ -111,7 +98,7 @@ class ColorTile extends StatelessWidget { }) : super(key: key); factory ColorTile.compact({ - required MaterialColor color, + required Color color, bool isActive = false, void Function()? onPressed, String? tooltip = "", @@ -138,7 +125,11 @@ class ColorTile extends StatelessWidget { border: isActive ? Border.fromBorderSide( BorderSide( - color: color[100]!, + color: Color.lerp( + theme.colorScheme.primary, + theme.colorScheme.onPrimary, + 0.5, + )!, width: 4, ), ) @@ -149,16 +140,13 @@ class ColorTile extends StatelessWidget { ); if (isCompact) { - return Tooltip( - message: tooltip, - child: GestureDetector( - onTap: onPressed, - child: lead, - ), + return GestureDetector( + onTap: onPressed, + child: lead, ); } - final colorScheme = ColorScheme.fromSwatch(primarySwatch: color); + final colorScheme = ColorScheme.fromSeed(seedColor: color); final palette = [ colorScheme.primary, @@ -173,46 +161,43 @@ class ColorTile extends StatelessWidget { colorScheme.onSurface, ]; - return Tooltip( - message: tooltip, - child: GestureDetector( - onTap: onPressed, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Row( - children: [ - lead, - const SizedBox(width: 10), - Text( - tooltip!, - style: theme.textTheme.bodyLarge?.copyWith( - color: theme.colorScheme.primary, - fontWeight: FontWeight.w600, - ), + return GestureDetector( + onTap: onPressed, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + lead, + const SizedBox(width: 10), + Text( + tooltip!, + style: theme.textTheme.bodyLarge?.copyWith( + color: theme.colorScheme.primary, + fontWeight: FontWeight.w600, ), - ], - ), - const SizedBox(height: 10), - Wrap( - alignment: WrapAlignment.start, - spacing: 10, - runSpacing: 10, - children: [ - ...palette.map( - (e) => Container( - height: 20, - width: 20, - decoration: BoxDecoration( - color: e, - borderRadius: BorderRadius.circular(5), - ), + ), + ], + ), + const SizedBox(height: 10), + Wrap( + alignment: WrapAlignment.start, + spacing: 10, + runSpacing: 10, + children: [ + ...palette.map( + (e) => Container( + height: 20, + width: 20, + decoration: BoxDecoration( + color: e, + borderRadius: BorderRadius.circular(5), ), ), - ], - ), - ], - ), + ), + ], + ), + ], ), ); } diff --git a/lib/main.dart b/lib/main.dart index 31c5c100a..92a72c1ea 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -28,6 +28,7 @@ import 'package:spotube/themes/theme.dart'; import 'package:spotube/utils/platform.dart'; import 'package:window_manager/window_manager.dart'; import 'package:window_size/window_size.dart'; +import 'package:system_theme/system_theme.dart'; void main(List rawArgs) async { final parser = ArgParser(); @@ -67,6 +68,7 @@ void main(List rawArgs) async { } WidgetsFlutterBinding.ensureInitialized(); + await SystemTheme.accentColor.load(); await QueryClient.initialize(cachePrefix: "oss.krtirtho.spotube"); Hive.registerAdapter(CacheTrackAdapter()); Hive.registerAdapter(CacheTrackEngagementAdapter()); diff --git a/lib/pages/settings/settings.dart b/lib/pages/settings/settings.dart index e9630b8ee..e5bb34324 100644 --- a/lib/pages/settings/settings.dart +++ b/lib/pages/settings/settings.dart @@ -23,13 +23,11 @@ class SettingsPage extends HookConsumerWidget { final auth = ref.watch(AuthenticationNotifier.provider); final theme = Theme.of(context); - final pickColorScheme = useCallback((ColorSchemeType schemeType) { + final pickColorScheme = useCallback(() { return () => showDialog( context: context, builder: (context) { - return ColorSchemePickerDialog( - schemeType: schemeType, - ); + return const ColorSchemePickerDialog(); }); }, []); @@ -195,10 +193,10 @@ class SettingsPage extends HookConsumerWidget { ), trailing: ColorTile.compact( color: preferences.accentColorScheme, - onPressed: pickColorScheme(ColorSchemeType.accent), + onPressed: pickColorScheme(), isActive: true, ), - onTap: pickColorScheme(ColorSchemeType.accent), + onTap: pickColorScheme(), ), SwitchListTile( secondary: const Icon(SpotubeIcons.album), diff --git a/lib/provider/user_preferences_provider.dart b/lib/provider/user_preferences_provider.dart index 56620532d..a5a13a486 100644 --- a/lib/provider/user_preferences_provider.dart +++ b/lib/provider/user_preferences_provider.dart @@ -30,7 +30,7 @@ class UserPreferences extends PersistedChangeNotifier { bool checkUpdate; AudioQuality audioQuality; - MaterialColor accentColorScheme; + Color accentColorScheme; bool skipSponsorSegments; String downloadLocation; @@ -93,7 +93,7 @@ class UserPreferences extends PersistedChangeNotifier { updatePersistence(); } - void setAccentColorScheme(MaterialColor color) { + void setAccentColorScheme(Color color) { accentColorScheme = color; notifyListeners(); updatePersistence(); diff --git a/pubspec.yaml b/pubspec.yaml index b34639694..5d009fda2 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -28,7 +28,6 @@ dependencies: file_picker: ^5.2.2 fl_query: ^1.0.0-alpha.2 fl_query_hooks: ^1.0.0-alpha.2 - fluent_ui: ^4.3.0 fluentui_system_icons: ^1.1.189 flutter: sdk: flutter