refactor(mobile): refactor theme management

mobile/lib/constants/colors.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+enum ImmichColorPreset {
+  indigo,
+  deepPurple,
+  pink,
+  red,
+  orange,
+  yellow,
+  lime,
+  green,
+  cyan,
+  slateGray
+}
+
+const ImmichColorPreset defaultColorPreset = ImmichColorPreset.indigo;
+const String defaultColorPresetName = "indigo";
+
+const Color immichBrandColorLight = Color(0xFF4150AF);
+const Color immichBrandColorDark = Color(0xFFACCBFA);
+const Color whiteOpacity75 = Color.fromARGB((0.75 * 255) ~/ 1, 255, 255, 255);
+const Color red400 = Color(0xFFEF5350);
+const Color grey200 = Color(0xFFEEEEEE);

mobile/lib/main.dart

@@ -4,23 +4,26 @@ import 'dart:io';
 import 'package:background_downloader/background_downloader.dart';
 import 'package:device_info_plus/device_info_plus.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:intl/date_symbol_data_local.dart';
+import 'package:timezone/data/latest.dart';
+import 'package:isar/isar.dart';
+import 'package:logging/logging.dart';
+import 'package:path_provider/path_provider.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_displaymode/flutter_displaymode.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
-import 'package:immich_mobile/providers/locale_provider.dart';
-import 'package:immich_mobile/utils/download.dart';
-import 'package:intl/date_symbol_data_local.dart';
-import 'package:timezone/data/latest.dart';
 import 'package:immich_mobile/constants/locales.dart';
-import 'package:immich_mobile/services/background.service.dart';
-import 'package:immich_mobile/entities/backup_album.entity.dart';
-import 'package:immich_mobile/entities/duplicated_asset.entity.dart';
+import 'package:immich_mobile/providers/locale_provider.dart';
+import 'package:immich_mobile/providers/theme.provider.dart';
+import 'package:immich_mobile/providers/app_life_cycle.provider.dart';
+import 'package:immich_mobile/providers/db.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/routing/tab_navigation_observer.dart';
-import 'package:immich_mobile/utils/cache/widgets_binding.dart';
+import 'package:immich_mobile/entities/backup_album.entity.dart';
+import 'package:immich_mobile/entities/duplicated_asset.entity.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
 import 'package:immich_mobile/entities/android_device_asset.entity.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
@@ -30,16 +33,15 @@ import 'package:immich_mobile/entities/ios_device_asset.entity.dart';
 import 'package:immich_mobile/entities/logger_message.entity.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 import 'package:immich_mobile/entities/user.entity.dart';
-import 'package:immich_mobile/providers/app_life_cycle.provider.dart';
-import 'package:immich_mobile/providers/db.provider.dart';
+import 'package:immich_mobile/services/background.service.dart';
 import 'package:immich_mobile/services/immich_logger.service.dart';
 import 'package:immich_mobile/services/local_notification.service.dart';
-import 'package:immich_mobile/utils/http_ssl_cert_override.dart';
-import 'package:immich_mobile/utils/immich_app_theme.dart';
 import 'package:immich_mobile/utils/migration.dart';
-import 'package:isar/isar.dart';
-import 'package:logging/logging.dart';
-import 'package:path_provider/path_provider.dart';
+import 'package:immich_mobile/utils/download.dart';
+import 'package:immich_mobile/utils/cache/widgets_binding.dart';
+import 'package:immich_mobile/utils/http_ssl_cert_override.dart';
+import 'package:immich_mobile/theme/theme_data.dart';
+import 'package:immich_mobile/theme/dynamic_theme.dart';
 
 void main() async {
   ImmichWidgetsBinding();
@@ -69,12 +71,12 @@ Future<void> initApp() async {
     }
   }
 
-  await fetchSystemPalette();
+  await DynamicTheme.fetchSystemPalette();
 
   // Initialize Immich Logger Service
   ImmichLogger();
 
-  var log = Logger("ImmichErrorLogger");
+  final log = Logger("ImmichErrorLogger");
 
   FlutterError.onError = (details) {
     FlutterError.presentError(details);

mobile/lib/pages/search/map/map.page.dart

@@ -264,7 +264,7 @@ class MapPage extends HookConsumerWidget {
       selectedAssets.value = selected ? selection : {};
     }
 
-    return MapThemeOveride(
+    return MapThemeOverride(
       mapBuilder: (style) => context.isMobile
           // Single-column
           ? Scaffold(

mobile/lib/pages/search/map/map_location_picker.page.dart

@@ -58,7 +58,7 @@ class MapLocationPickerPage extends HookConsumerWidget {
       controller.value?.animateCamera(CameraUpdate.newLatLng(currentLatLng));
     }
 
-    return MapThemeOveride(
+    return MapThemeOverride(
       mapBuilder: (style) => Builder(
         builder: (ctx) => Scaffold(
           backgroundColor: ctx.themeData.cardColor,

mobile/lib/providers/theme.provider.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+import 'package:immich_mobile/constants/colors.dart';
+import 'package:immich_mobile/theme/color_scheme.dart';
+import 'package:immich_mobile/theme/theme_data.dart';
+import 'package:immich_mobile/theme/dynamic_theme.dart';
+import 'package:immich_mobile/providers/app_settings.provider.dart';
+import 'package:immich_mobile/services/app_settings.service.dart';
+
+final immichThemeModeProvider = StateProvider<ThemeMode>((ref) {
+  final themeMode = ref
+      .watch(appSettingsServiceProvider)
+      .getSetting(AppSettingsEnum.themeMode);
+
+  debugPrint("Current themeMode $themeMode");
+
+  if (themeMode == ThemeMode.light.name) {
+    return ThemeMode.light;
+  } else if (themeMode == ThemeMode.dark.name) {
+    return ThemeMode.dark;
+  } else {
+    return ThemeMode.system;
+  }
+});
+
+final immichThemePresetProvider = StateProvider<ImmichColorPreset>((ref) {
+  final appSettingsProvider = ref.watch(appSettingsServiceProvider);
+  final primaryColorPreset =
+      appSettingsProvider.getSetting(AppSettingsEnum.primaryColor);
+
+  debugPrint("Current theme preset $primaryColorPreset");
+
+  try {
+    return ImmichColorPreset.values
+        .firstWhere((e) => e.name == primaryColorPreset);
+  } catch (e) {
+    debugPrint(
+      "Theme preset $primaryColorPreset not found. Applying default preset.",
+    );
+    appSettingsProvider.setSetting(
+      AppSettingsEnum.primaryColor,
+      defaultColorPresetName,
+    );
+    return defaultColorPreset;
+  }
+});
+
+final dynamicThemeSettingProvider = StateProvider<bool>((ref) {
+  return ref
+      .watch(appSettingsServiceProvider)
+      .getSetting(AppSettingsEnum.dynamicTheme);
+});
+
+final colorfulInterfaceSettingProvider = StateProvider<bool>((ref) {
+  return ref
+      .watch(appSettingsServiceProvider)
+      .getSetting(AppSettingsEnum.colorfulInterface);
+});
+
+// Provider for current selected theme
+final immichThemeProvider = StateProvider<ImmichTheme>((ref) {
+  final primaryColorPreset = ref.read(immichThemePresetProvider);
+  final useSystemColor = ref.watch(dynamicThemeSettingProvider);
+  final useColorfulInterface = ref.watch(colorfulInterfaceSettingProvider);
+  final ImmichTheme? dynamicTheme = DynamicTheme.theme;
+  final currentTheme = (useSystemColor && dynamicTheme != null)
+      ? dynamicTheme
+      : primaryColorPreset.themeOfPreset;
+
+  return useColorfulInterface
+      ? currentTheme
+      : decolorizeSurfaces(theme: currentTheme);
+});

mobile/lib/services/app_settings.service.dart

@@ -1,4 +1,4 @@
-import 'package:immich_mobile/constants/immich_colors.dart';
+import 'package:immich_mobile/constants/colors.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
 
 enum AppSettingsEnum<T> {

mobile/lib/constants/immich_colors.dart → mobile/lib/theme/color_scheme.dart

@@ -1,29 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:immich_mobile/utils/immich_app_theme.dart';
+import 'package:immich_mobile/constants/colors.dart';
+import 'package:immich_mobile/theme/theme_data.dart';
 
-enum ImmichColorPreset {
-  indigo,
-  deepPurple,
-  pink,
-  red,
-  orange,
-  yellow,
-  lime,
-  green,
-  cyan,
-  slateGray
-}
-
-const ImmichColorPreset defaultColorPreset = ImmichColorPreset.indigo;
-const String defaultColorPresetName = "indigo";
-
-const Color immichBrandColorLight = Color(0xFF4150AF);
-const Color immichBrandColorDark = Color(0xFFACCBFA);
-const Color whiteOpacity75 = Color.fromARGB((0.75 * 255) ~/ 1, 255, 255, 255);
-const Color red400 = Color(0xFFEF5350);
-const Color grey200 = Color(0xFFEEEEEE);
-
-final Map<ImmichColorPreset, ImmichTheme> _themePresetsMap = {
+final Map<ImmichColorPreset, ImmichTheme> _themePresets = {
   ImmichColorPreset.indigo: ImmichTheme(
     light: ColorScheme.fromSeed(
       seedColor: immichBrandColorLight,
@@ -110,5 +89,5 @@ final Map<ImmichColorPreset, ImmichTheme> _themePresetsMap = {
 };
 
 extension ImmichColorModeExtension on ImmichColorPreset {
-  ImmichTheme getTheme() => _themePresetsMap[this]!;
+  ImmichTheme get themeOfPreset => _themePresets[this]!;
 }

mobile/lib/theme/dynamic_theme.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:dynamic_color/dynamic_color.dart';
+
+import 'package:immich_mobile/theme/theme_data.dart';
+
+abstract final class DynamicTheme {
+  DynamicTheme._();
+
+  static ImmichTheme? _theme;
+  // Method to fetch dynamic system colors
+  static Future<void> fetchSystemPalette() async {
+    try {
+      final corePalette = await DynamicColorPlugin.getCorePalette();
+      if (corePalette != null) {
+        final primaryColor = corePalette.toColorScheme().primary;
+        debugPrint('dynamic_color: Core palette detected.');
+
+        // Some palettes do not generate surface container colors accurately,
+        // so we regenerate all colors using the primary color
+        _theme = ImmichTheme(
+          light: ColorScheme.fromSeed(
+            seedColor: primaryColor,
+            brightness: Brightness.light,
+          ),
+          dark: ColorScheme.fromSeed(
+            seedColor: primaryColor,
+            brightness: Brightness.dark,
+          ),
+        );
+      }
+    } catch (error) {
+      debugPrint('dynamic_color: Failed to obtain core palette: $error');
+    }
+  }
+
+  static ImmichTheme? get theme => _theme;
+  static bool get isAvailable => _theme != null;
+}