feat: use system color scheme

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<String, Color> 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({Key? key}) : super(key: key);
-  const ColorSchemePickerDialog({required this.schemeType, Key? key})
-      : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
@@ -44,20 +39,12 @@ class ColorSchemePickerDialog extends HookConsumerWidget {
     ).key);
 
     onOk() {
-      switch (schemeType) {
+      preferences.setAccentColorScheme(colorsMap[active.value]!);
-        case ColorSchemeType.accent:
-          preferences.setAccentColorScheme(colorsMap[active.value]!);
-          break;
-        default:
-          preferences.setBackgroundColorScheme(
-            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(
+      return GestureDetector(
-        message: tooltip,
+        onTap: onPressed,
-        child: GestureDetector(
+        child: lead,
-          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(
+    return GestureDetector(
-      message: tooltip,
+      onTap: onPressed,
-      child: GestureDetector(
+      child: Column(
-        onTap: onPressed,
+        crossAxisAlignment: CrossAxisAlignment.start,
-        child: Column(
+        children: [
-          crossAxisAlignment: CrossAxisAlignment.start,
+          Row(
-          children: [
+            children: [
-            Row(
+              lead,
-              children: [
+              const SizedBox(width: 10),
-                lead,
+              Text(
-                const SizedBox(width: 10),
+                tooltip!,
-                Text(
+                style: theme.textTheme.bodyLarge?.copyWith(
-                  tooltip!,
+                  color: theme.colorScheme.primary,
-                  style: theme.textTheme.bodyLarge?.copyWith(
+                  fontWeight: FontWeight.w600,
-                    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),
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          ],
-        ),
       ),
     );
   }

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<String> rawArgs) async {
   final parser = ArgParser();
@@ -67,6 +68,7 @@ void main(List<String> rawArgs) async {
   }
 
   WidgetsFlutterBinding.ensureInitialized();
+  await SystemTheme.accentColor.load();
   await QueryClient.initialize(cachePrefix: "oss.krtirtho.spotube");
   Hive.registerAdapter(CacheTrackAdapter());
   Hive.registerAdapter(CacheTrackEngagementAdapter());

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(
+            return const ColorSchemePickerDialog();
-              schemeType: schemeType,
-            );
           });
     }, []);
 
@@ -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),

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();

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