fix: system color scheme not persisting on restart when system color scheme changed

lib/components/settings/color_scheme_picker_dialog.dart

@@ -5,24 +5,42 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
 import 'package:system_theme/system_theme.dart';
 
-final Map<String, Color> colorsMap = {
+class SpotubeColor extends Color {
-  "System": SystemTheme.accentColor.accent,
+  final String name;
-  "Red": Colors.red,
+
-  "Pink": Colors.pink,
+  const SpotubeColor(int color, {required this.name}) : super(color);
-  "Purple": Colors.purple,
+
-  "DeepPurple": Colors.deepPurple,
+  const SpotubeColor.from(int value, {required this.name}) : super(value);
-  "Indigo": Colors.indigo,
+
-  "Blue": Colors.blue,
+  factory SpotubeColor.fromString(String string) {
-  "LightBlue": Colors.lightBlue,
+    final slices = string.split(":");
-  "Cyan": Colors.cyan,
+    return SpotubeColor(int.parse(slices.last), name: slices.first);
-  "Teal": Colors.teal,
+  }
-  "Green": Colors.green,
+
-  "LightGreen": Colors.lightGreen,
+  @override
-  "Yellow": Colors.yellow,
+  String toString() {
-  "Amber": Colors.amber,
+    return "$name:$value";
-  "Orange": Colors.orange,
+  }
-  "DeepOrange": Colors.deepOrange,
+}
-  "Brown": Colors.brown,
+
+final Set<SpotubeColor> colorsMap = {
+  SpotubeColor(SystemTheme.accentColor.accent.value, name: "System"),
+  SpotubeColor(Colors.red.value, name: "Red"),
+  SpotubeColor(Colors.pink.value, name: "Pink"),
+  SpotubeColor(Colors.purple.value, name: "Purple"),
+  SpotubeColor(Colors.deepPurple.value, name: "DeepPurple"),
+  SpotubeColor(Colors.indigo.value, name: "Indigo"),
+  SpotubeColor(Colors.blue.value, name: "Blue"),
+  SpotubeColor(Colors.lightBlue.value, name: "LightBlue"),
+  SpotubeColor(Colors.cyan.value, name: "Cyan"),
+  SpotubeColor(Colors.teal.value, name: "Teal"),
+  SpotubeColor(Colors.green.value, name: "Green"),
+  SpotubeColor(Colors.lightGreen.value, name: "LightGreen"),
+  SpotubeColor(Colors.yellow.value, name: "Yellow"),
+  SpotubeColor(Colors.amber.value, name: "Amber"),
+  SpotubeColor(Colors.orange.value, name: "Orange"),
+  SpotubeColor(Colors.deepOrange.value, name: "DeepOrange"),
+  SpotubeColor(Colors.brown.value, name: "Brown"),
 };
 
 class ColorSchemePickerDialog extends HookConsumerWidget {
@@ -32,14 +50,20 @@ class ColorSchemePickerDialog extends HookConsumerWidget {
   Widget build(BuildContext context, ref) {
     final preferences = ref.watch(userPreferencesProvider);
     final scheme = preferences.accentColorScheme;
-    final active = useState<String>(colorsMap.entries.firstWhere(
+    final active = useState<String>(colorsMap.firstWhere(
       (element) {
-        return scheme.value == element.value.value;
+        return scheme.name == element.name;
       },
-    ).key);
+    ).name);
 
     onOk() {
-      preferences.setAccentColorScheme(colorsMap[active.value]!);
+      preferences.setAccentColorScheme(
+        colorsMap.firstWhere(
+          (element) {
+            return element.name == active.value;
+          },
+        ),
+      );
       Navigator.pop(context);
     }
 
@@ -66,14 +90,14 @@ class ColorSchemePickerDialog extends HookConsumerWidget {
           },
           itemCount: colorsMap.length,
           itemBuilder: (context, index) {
-            final color = colorsMap.entries.elementAt(index);
+            final color = colorsMap.elementAt(index);
             return ColorTile(
-              color: color.value,
+              color: color,
-              isActive: active.value == color.key,
+              isActive: active.value == color.name,
               onPressed: () {
-                active.value = color.key;
+                active.value = color.name;
               },
-              tooltip: color.key,
+              tooltip: color.name,
             );
           },
         ),

lib/main.dart

@@ -14,7 +14,6 @@ import 'package:package_info_plus/package_info_plus.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotube/collections/cache_keys.dart';
 import 'package:spotube/collections/env.dart';
-import 'package:spotube/components/settings/color_scheme_picker_dialog.dart';
 import 'package:spotube/components/shared/dialogs/replace_downloaded_dialog.dart';
 import 'package:spotube/entities/cache_track.dart';
 import 'package:spotube/collections/routes.dart';
@@ -70,7 +69,6 @@ void main(List<String> rawArgs) async {
 
   WidgetsFlutterBinding.ensureInitialized();
   await SystemTheme.accentColor.load();
-  colorsMap["System"] = SystemTheme.accentColor.accent;
   await QueryClient.initialize(cachePrefix: "oss.krtirtho.spotube");
   Hive.registerAdapter(CacheTrackAdapter());
   Hive.registerAdapter(CacheTrackEngagementAdapter());

lib/provider/user_preferences_provider.dart

@@ -6,7 +6,6 @@ import 'package:path_provider/path_provider.dart';
 import 'package:spotube/components/settings/color_scheme_picker_dialog.dart';
 import 'package:spotube/models/generated_secrets.dart';
 import 'package:spotube/utils/persisted_change_notifier.dart';
-import 'package:collection/collection.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:spotube/utils/primitive_utils.dart';
 import 'package:path/path.dart' as path;
@@ -30,7 +29,7 @@ class UserPreferences extends PersistedChangeNotifier {
   bool checkUpdate;
   AudioQuality audioQuality;
 
-  Color accentColorScheme;
+  SpotubeColor accentColorScheme;
   bool skipSponsorSegments;
 
   String downloadLocation;
@@ -46,8 +45,8 @@ class UserPreferences extends PersistedChangeNotifier {
     required this.themeMode,
     required this.layoutMode,
     required this.predownload,
+    required this.accentColorScheme,
     this.saveTrackLyrics = false,
-    this.accentColorScheme = Colors.green,
     this.checkUpdate = true,
     this.audioQuality = AudioQuality.high,
     this.skipSponsorSegments = true,
@@ -93,7 +92,7 @@ class UserPreferences extends PersistedChangeNotifier {
     updatePersistence();
   }
 
-  void setAccentColorScheme(Color color) {
+  void setAccentColorScheme(SpotubeColor color) {
     accentColorScheme = color;
     notifyListeners();
     updatePersistence();
@@ -162,9 +161,9 @@ class UserPreferences extends PersistedChangeNotifier {
         PrimitiveUtils.getRandomElement(lyricsSecrets);
 
     themeMode = ThemeMode.values[map["themeMode"] ?? 0];
-    accentColorScheme = colorsMap.values
+    accentColorScheme = map["accentColorScheme"] != null
-            .firstWhereOrNull((e) => e.value == map["accentColorScheme"]) ??
+        ? SpotubeColor.fromString(map["accentColorScheme"])
-        accentColorScheme;
+        : accentColorScheme;
     audioQuality = map["audioQuality"] != null
         ? AudioQuality.values[map["audioQuality"]]
         : audioQuality;
@@ -187,7 +186,7 @@ class UserPreferences extends PersistedChangeNotifier {
       "recommendationMarket": recommendationMarket,
       "geniusAccessToken": geniusAccessToken,
       "themeMode": themeMode.index,
-      "accentColorScheme": accentColorScheme.value,
+      "accentColorScheme": accentColorScheme.toString(),
       "checkUpdate": checkUpdate,
       "audioQuality": audioQuality.index,
       "skipSponsorSegments": skipSponsorSegments,
@@ -201,6 +200,7 @@ class UserPreferences extends PersistedChangeNotifier {
 
 final userPreferencesProvider = ChangeNotifierProvider(
   (_) => UserPreferences(
+    accentColorScheme: SpotubeColor(Colors.blue.value, name: "Blue"),
     geniusAccessToken: "",
     recommendationMarket: 'US',
     themeMode: ThemeMode.system,