From 60ede5f92b732691d53850290d9667435298a857 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Tue, 7 Mar 2023 10:38:01 +0600 Subject: [PATCH] feat(theme): use material3 monet for colors and remove background color preference --- lib/components/artist/artist_card.dart | 2 +- .../settings/color_scheme_picker_dialog.dart | 24 +--- lib/components/shared/playbutton_card.dart | 2 +- lib/main.dart | 13 +- lib/pages/settings/settings.dart | 16 +-- lib/provider/user_preferences_provider.dart | 7 - lib/themes/light_theme.dart | 135 +++--------------- 7 files changed, 29 insertions(+), 170 deletions(-) diff --git a/lib/components/artist/artist_card.dart b/lib/components/artist/artist_card.dart index e0bc0dc22..86743fdee 100644 --- a/lib/components/artist/artist_card.dart +++ b/lib/components/artist/artist_card.dart @@ -36,7 +36,7 @@ class ArtistCard extends HookConsumerWidget { blurRadius: 10, offset: const Offset(0, 3), spreadRadius: 5, - color: Theme.of(context).shadowColor, + color: Theme.of(context).colorScheme.shadow, ), ios: null, macos: null, diff --git a/lib/components/settings/color_scheme_picker_dialog.dart b/lib/components/settings/color_scheme_picker_dialog.dart index dfb66d242..cb4d10b69 100644 --- a/lib/components/settings/color_scheme_picker_dialog.dart +++ b/lib/components/settings/color_scheme_picker_dialog.dart @@ -6,23 +6,6 @@ import 'package:platform_ui/platform_ui.dart'; import 'package:spotube/components/root/sidebar.dart'; import 'package:spotube/provider/user_preferences_provider.dart'; -final highContrast = MaterialColor( - const Color.fromARGB(255, 104, 104, 104).value, - const { - 50: Colors.white, - 100: Color.fromARGB(255, 233, 233, 233), - 200: Color.fromARGB(255, 224, 219, 219), - 300: Color.fromARGB(255, 207, 207, 207), - 400: Color.fromARGB(255, 146, 146, 146), - 500: Color.fromARGB(255, 104, 104, 104), - 600: Color.fromARGB(255, 78, 78, 78), - 700: Color.fromARGB(255, 61, 61, 61), - 800: Color.fromARGB(255, 27, 27, 27), - 850: Color.fromARGB(255, 20, 20, 20), - 900: Colors.black, - }, -); - final colorsMap = { "Red": Colors.red, "Pink": Colors.pink, @@ -41,9 +24,6 @@ final colorsMap = { "Orange": Colors.orange, "DeepOrange": Colors.deepOrange, "Brown": Colors.brown, - "BlueGrey": Colors.blueGrey, - "Grey": Colors.grey, - "HighContrast": highContrast, }; enum ColorSchemeType { @@ -59,9 +39,7 @@ class ColorSchemePickerDialog extends HookConsumerWidget { @override Widget build(BuildContext context, ref) { final preferences = ref.watch(userPreferencesProvider); - final scheme = schemeType == ColorSchemeType.accent - ? preferences.accentColorScheme - : preferences.backgroundColorScheme; + final scheme = preferences.accentColorScheme; final active = useState(colorsMap.entries.firstWhere( (element) { return scheme.value == element.value.value; diff --git a/lib/components/shared/playbutton_card.dart b/lib/components/shared/playbutton_card.dart index 1569f4536..5b7c5d79a 100644 --- a/lib/components/shared/playbutton_card.dart +++ b/lib/components/shared/playbutton_card.dart @@ -46,7 +46,7 @@ class PlaybuttonCard extends HookWidget { blurRadius: 10, offset: const Offset(0, 3), spreadRadius: 5, - color: Theme.of(context).shadowColor, + color: Theme.of(context).colorScheme.shadow, ), ios: null, macos: null, diff --git a/lib/main.dart b/lib/main.dart index dcd6d3b27..eb566af22 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -25,7 +25,6 @@ import 'package:spotube/provider/user_preferences_provider.dart'; import 'package:spotube/services/audio_player.dart'; import 'package:spotube/services/pocketbase.dart'; import 'package:spotube/services/youtube.dart'; -import 'package:spotube/themes/dark_theme.dart'; import 'package:spotube/themes/light_theme.dart'; import 'package:spotube/utils/platform.dart'; import 'package:window_manager/window_manager.dart'; @@ -260,8 +259,6 @@ class SpotubeState extends ConsumerState with WidgetsBindingObserver { ref.watch(userPreferencesProvider.select((s) => s.themeMode)); final accentMaterialColor = ref.watch(userPreferencesProvider.select((s) => s.accentColorScheme)); - final backgroundMaterialColor = ref - .watch(userPreferencesProvider.select((s) => s.backgroundColorScheme)); /// For enabling hot reload for audio player useEffect(() { @@ -282,14 +279,8 @@ class SpotubeState extends ConsumerState with WidgetsBindingObserver { builder: (context, child) { return DragToResizeArea(child: child!); }, - androidTheme: lightTheme( - accentMaterialColor: accentMaterialColor, - backgroundMaterialColor: backgroundMaterialColor, - ), - androidDarkTheme: darkTheme( - accentMaterialColor: accentMaterialColor, - backgroundMaterialColor: backgroundMaterialColor, - ), + androidTheme: theme(accentMaterialColor, Brightness.light), + androidDarkTheme: theme(accentMaterialColor, Brightness.dark), linuxTheme: linuxTheme, linuxDarkTheme: linuxDarkTheme, iosTheme: themeMode == ThemeMode.dark ? iosDarkTheme : iosTheme, diff --git a/lib/pages/settings/settings.dart b/lib/pages/settings/settings.dart index 0b609e293..b71cf751e 100644 --- a/lib/pages/settings/settings.dart +++ b/lib/pages/settings/settings.dart @@ -235,7 +235,7 @@ class SettingsPage extends HookConsumerWidget { ), PlatformListTile( leading: const Icon(SpotubeIcons.palette), - title: const PlatformText("Accent Color Scheme"), + title: const PlatformText("Accent Color"), contentPadding: const EdgeInsets.symmetric( horizontal: 15, vertical: 5, @@ -247,20 +247,6 @@ class SettingsPage extends HookConsumerWidget { ), onTap: pickColorScheme(ColorSchemeType.accent), ), - PlatformListTile( - leading: const Icon(SpotubeIcons.colorBucket), - title: const PlatformText("Background Color Scheme"), - contentPadding: const EdgeInsets.symmetric( - horizontal: 15, - vertical: 5, - ), - trailing: ColorTile( - color: preferences.backgroundColorScheme, - onPressed: pickColorScheme(ColorSchemeType.background), - isActive: true, - ), - onTap: pickColorScheme(ColorSchemeType.background), - ), PlatformListTile( leading: const Icon(SpotubeIcons.album), title: const PlatformText("Rotating Album Art"), diff --git a/lib/provider/user_preferences_provider.dart b/lib/provider/user_preferences_provider.dart index c324c3108..56620532d 100644 --- a/lib/provider/user_preferences_provider.dart +++ b/lib/provider/user_preferences_provider.dart @@ -31,7 +31,6 @@ class UserPreferences extends PersistedChangeNotifier { AudioQuality audioQuality; MaterialColor accentColorScheme; - MaterialColor backgroundColorScheme; bool skipSponsorSegments; String downloadLocation; @@ -49,7 +48,6 @@ class UserPreferences extends PersistedChangeNotifier { required this.predownload, this.saveTrackLyrics = false, this.accentColorScheme = Colors.green, - this.backgroundColorScheme = Colors.grey, this.checkUpdate = true, this.audioQuality = AudioQuality.high, this.skipSponsorSegments = true, @@ -102,7 +100,6 @@ class UserPreferences extends PersistedChangeNotifier { } void setBackgroundColorScheme(MaterialColor color) { - backgroundColorScheme = color; notifyListeners(); updatePersistence(); } @@ -165,9 +162,6 @@ class UserPreferences extends PersistedChangeNotifier { PrimitiveUtils.getRandomElement(lyricsSecrets); themeMode = ThemeMode.values[map["themeMode"] ?? 0]; - backgroundColorScheme = colorsMap.values - .firstWhereOrNull((e) => e.value == map["backgroundColorScheme"]) ?? - backgroundColorScheme; accentColorScheme = colorsMap.values .firstWhereOrNull((e) => e.value == map["accentColorScheme"]) ?? accentColorScheme; @@ -193,7 +187,6 @@ class UserPreferences extends PersistedChangeNotifier { "recommendationMarket": recommendationMarket, "geniusAccessToken": geniusAccessToken, "themeMode": themeMode.index, - "backgroundColorScheme": backgroundColorScheme.value, "accentColorScheme": accentColorScheme.value, "checkUpdate": checkUpdate, "audioQuality": audioQuality.index, diff --git a/lib/themes/light_theme.dart b/lib/themes/light_theme.dart index a8c727bc6..d38f529c7 100644 --- a/lib/themes/light_theme.dart +++ b/lib/themes/light_theme.dart @@ -5,130 +5,41 @@ import 'package:macos_ui/macos_ui.dart'; import 'package:spotube/extensions/theme.dart'; import 'package:fluent_ui/fluent_ui.dart' as fluent_ui; -final materialWhite = MaterialColor(Colors.white.value, { - 50: Colors.white, - 100: Colors.blueGrey[100]!, - 200: Colors.white, - 300: Colors.white, - 400: Colors.blueGrey[300]!, - 500: Colors.blueGrey, - 600: Colors.white, - 700: Colors.grey[700]!, - 800: Colors.white, - 900: Colors.white, -}); - -ThemeData lightTheme({ - required MaterialColor accentMaterialColor, - required MaterialColor backgroundMaterialColor, -}) { +ThemeData theme(Color seed, Brightness brightness) { + final scheme = ColorScheme.fromSeed( + seedColor: seed, + shadow: Colors.black12, + brightness: brightness, + ); return ThemeData( useMaterial3: true, - extensions: [ - ShimmerColorTheme( - shimmerBackgroundColor: backgroundMaterialColor[200], - shimmerColor: backgroundMaterialColor[300], - ) - ], - primaryColor: accentMaterialColor, - primarySwatch: accentMaterialColor, - buttonTheme: ButtonThemeData( - buttonColor: accentMaterialColor, - ), - shadowColor: Colors.grey[300], - backgroundColor: backgroundMaterialColor[50], - textTheme: TextTheme( - bodyText1: TextStyle(color: Colors.grey[850]), - headline1: TextStyle(color: Colors.grey[850]), - headline2: TextStyle(color: Colors.grey[850]), - headline3: TextStyle(color: Colors.grey[850]), - headline4: TextStyle(color: Colors.grey[850]), - headline5: TextStyle(color: Colors.grey[850]), - headline6: TextStyle(color: Colors.grey[850]), - ), + colorScheme: scheme, listTileTheme: ListTileThemeData( - iconColor: Colors.grey[850], horizontalTitleGap: 0, + iconColor: scheme.onSurface, ), - iconTheme: const IconThemeData(size: 16), inputDecorationTheme: InputDecorationTheme( - isDense: true, - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(20), - borderSide: BorderSide( - color: accentMaterialColor[400]!, - width: 2.0, - ), - ), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(20), - borderSide: BorderSide( - color: Colors.grey[600]!, - ), - ), - ), - navigationRailTheme: NavigationRailThemeData( - backgroundColor: backgroundMaterialColor[100], - indicatorColor: accentMaterialColor[300], - selectedIconTheme: IconThemeData( - color: accentMaterialColor[850], - size: 18, - ), - unselectedIconTheme: IconThemeData( - color: Colors.grey[850], - opacity: 1, - size: 18, - ), - unselectedLabelTextStyle: TextStyle( - color: Colors.grey[850], + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(15), ), ), - navigationBarTheme: NavigationBarThemeData( - backgroundColor: backgroundMaterialColor[50], - height: 45, - indicatorColor: accentMaterialColor[300], - iconTheme: MaterialStateProperty.all( - IconThemeData(color: Colors.grey[850], size: 18), - ), + iconTheme: IconThemeData(size: 16, color: scheme.onSurface), + navigationBarTheme: const NavigationBarThemeData( labelBehavior: NavigationDestinationLabelBehavior.alwaysHide, - ), - cardTheme: CardTheme( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), - color: backgroundMaterialColor[50], - ), - splashFactory: NoSplash.splashFactory, - elevatedButtonTheme: ElevatedButtonThemeData( - style: ElevatedButton.styleFrom( - foregroundColor: accentMaterialColor[800], - textStyle: const TextStyle( - fontWeight: FontWeight.bold, - ), + height: 50, + iconTheme: MaterialStatePropertyAll( + IconThemeData(size: 18), ), ), - popupMenuTheme: PopupMenuThemeData( - color: backgroundMaterialColor[100], - elevation: 2, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(18.0), - ), - ), - cardColor: backgroundMaterialColor[50], - canvasColor: backgroundMaterialColor[50], - checkboxTheme: CheckboxThemeData( - fillColor: MaterialStateProperty.resolveWith((states) { - if (states.contains(MaterialState.selected)) { - return accentMaterialColor[500]; - } - return null; - }), - ), tabBarTheme: TabBarTheme( - indicator: const BoxDecoration(color: Colors.transparent), - labelColor: accentMaterialColor[500], - unselectedLabelColor: Colors.grey[850], - labelStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16), - unselectedLabelStyle: - const TextStyle(fontWeight: FontWeight.w600, fontSize: 16), + indicatorSize: TabBarIndicatorSize.tab, + labelStyle: const TextStyle(fontWeight: FontWeight.w600), + labelColor: scheme.primary, + overlayColor: MaterialStateProperty.all(Colors.transparent), + indicator: BoxDecoration( + color: scheme.secondaryContainer, + borderRadius: BorderRadius.circular(15), + ), ), ); }