feat(theme): use material3 monet for colors and remove background color preference

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,

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
+    final scheme = preferences.accentColorScheme;
-        ? preferences.accentColorScheme
-        : preferences.backgroundColorScheme;
     final active = useState<String>(colorsMap.entries.firstWhere(
       (element) {
         return scheme.value == element.value.value;

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,

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<Spotube> 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<Spotube> with WidgetsBindingObserver {
       builder: (context, child) {
         return DragToResizeArea(child: child!);
       },
-      androidTheme: lightTheme(
+      androidTheme: theme(accentMaterialColor, Brightness.light),
-        accentMaterialColor: accentMaterialColor,
+      androidDarkTheme: theme(accentMaterialColor, Brightness.dark),
-        backgroundMaterialColor: backgroundMaterialColor,
-      ),
-      androidDarkTheme: darkTheme(
-        accentMaterialColor: accentMaterialColor,
-        backgroundMaterialColor: backgroundMaterialColor,
-      ),
       linuxTheme: linuxTheme,
       linuxDarkTheme: linuxDarkTheme,
       iosTheme: themeMode == ThemeMode.dark ? iosDarkTheme : iosTheme,

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"),

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,

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, {
+ThemeData theme(Color seed, Brightness brightness) {
-  50: Colors.white,
+  final scheme = ColorScheme.fromSeed(
-  100: Colors.blueGrey[100]!,
+    seedColor: seed,
-  200: Colors.white,
+    shadow: Colors.black12,
-  300: Colors.white,
+    brightness: brightness,
-  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,
-}) {
   return ThemeData(
     useMaterial3: true,
-    extensions: [
+    colorScheme: scheme,
-      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]),
-    ),
     listTileTheme: ListTileThemeData(
-      iconColor: Colors.grey[850],
       horizontalTitleGap: 0,
+      iconColor: scheme.onSurface,
     ),
-    iconTheme: const IconThemeData(size: 16),
     inputDecorationTheme: InputDecorationTheme(
-      isDense: true,
+      border: OutlineInputBorder(
-      focusedBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(15),
-        borderRadius: BorderRadius.circular(20),
-        borderSide: BorderSide(
-          color: accentMaterialColor[400]!,
-          width: 2.0,
       ),
     ),
-      enabledBorder: OutlineInputBorder(
+    iconTheme: IconThemeData(size: 16, color: scheme.onSurface),
-        borderRadius: BorderRadius.circular(20),
+    navigationBarTheme: const NavigationBarThemeData(
-        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],
-      ),
-    ),
-    navigationBarTheme: NavigationBarThemeData(
-      backgroundColor: backgroundMaterialColor[50],
-      height: 45,
-      indicatorColor: accentMaterialColor[300],
-      iconTheme: MaterialStateProperty.all(
-        IconThemeData(color: Colors.grey[850], size: 18),
-      ),
       labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
+      height: 50,
+      iconTheme: MaterialStatePropertyAll(
+        IconThemeData(size: 18),
       ),
-    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,
-        ),
-      ),
-    ),
-    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),
+      indicatorSize: TabBarIndicatorSize.tab,
-      labelColor: accentMaterialColor[500],
+      labelStyle: const TextStyle(fontWeight: FontWeight.w600),
-      unselectedLabelColor: Colors.grey[850],
+      labelColor: scheme.primary,
-      labelStyle: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+      overlayColor: MaterialStateProperty.all(Colors.transparent),
-      unselectedLabelStyle:
+      indicator: BoxDecoration(
-          const TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
+        color: scheme.secondaryContainer,
+        borderRadius: BorderRadius.circular(15),
+      ),
     ),
   );
 }