feat(mobile): add support for material themes (#11560)

* feat(mobile): add support for material themes

Added support for custom theming and updated all elements accordingly.

* fix(mobile): Restored immich brand colors to default theme

* fix(mobile): make ListTile titles bold in settings main page

* feat(mobile): update bottom nav and appbar colors

* small tweaks

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

mobile/lib/widgets/asset_grid/control_bottom_app_bar.dart

@@ -281,7 +281,7 @@ class ControlBottomAppBar extends HookConsumerWidget {
         ScrollController scrollController,
       ) {
         return Card(
-          color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[100],
+          color: context.colorScheme.surfaceContainerLow,
           surfaceTintColor: Colors.transparent,
           elevation: 18.0,
           shape: const RoundedRectangleBorder(

mobile/lib/widgets/asset_grid/disable_multi_select_button.dart

@@ -22,12 +22,15 @@ class DisableMultiSelectButton extends ConsumerWidget {
           padding: const EdgeInsets.symmetric(horizontal: 4.0),
           child: ElevatedButton.icon(
             onPressed: () => onPressed(),
-            icon: const Icon(Icons.close_rounded),
+            icon: Icon(
+              Icons.close_rounded,
+              color: context.colorScheme.onPrimary,
+            ),
             label: Text(
               '$selectedItemCount',
               style: context.textTheme.titleMedium?.copyWith(
                 height: 2.5,
-                color: context.isDarkTheme ? Colors.black : Colors.white,
+                color: context.colorScheme.onPrimary,
               ),
             ),
           ),

mobile/lib/widgets/asset_grid/group_divider_title.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/widgets/asset_grid/asset_grid_data_structure.dart';
 import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
@@ -74,9 +75,9 @@ class GroupDividerTitle extends HookConsumerWidget {
                     Icons.check_circle_rounded,
                     color: context.primaryColor,
                   )
-                : const Icon(
+                : Icon(
                     Icons.check_circle_outline_rounded,
-                    color: Colors.grey,
+                    color: context.colorScheme.onSurfaceSecondary,
                   ),
           ),
         ],

mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart

@@ -11,6 +11,7 @@ import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/extensions/collection_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/providers/asset_viewer/scroll_notifier.provider.dart';
 import 'package:immich_mobile/widgets/asset_grid/asset_drag_region.dart';
 import 'package:immich_mobile/widgets/asset_grid/thumbnail_image.dart';
@@ -266,7 +267,9 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> {
             scrollStateListener: dragScrolling,
             itemPositionsListener: _itemPositionsListener,
             controller: _itemScrollController,
-            backgroundColor: context.themeData.hintColor,
+            backgroundColor: context.isDarkTheme
+                ? context.colorScheme.primary.darken(amount: .5)
+                : context.colorScheme.primary,
             labelTextBuilder: _labelBuilder,
             padding: appBarOffset()
                 ? const EdgeInsets.only(top: 60)

mobile/lib/widgets/asset_grid/thumbnail_image.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
 import 'package:immich_mobile/utils/storage_indicator.dart';
 import 'package:isar/isar.dart';
@@ -42,8 +43,8 @@ class ThumbnailImage extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final assetContainerColor = context.isDarkTheme
-        ? Colors.blueGrey
-        : context.themeData.primaryColorLight;
+        ? context.primaryColor.darken(amount: 0.6)
+        : context.primaryColor.lighten(amount: 0.8);
     // Assets from response DTOs do not have an isar id, querying which would give us the default autoIncrement id
     final isFromDto = asset.id == Isar.autoIncrement;
 
@@ -192,8 +193,8 @@ class ThumbnailImage extends ConsumerWidget {
             bottom: 5,
             child: Icon(
               storageIcon(asset),
-              color: Colors.white,
-              size: 18,
+              color: Colors.white.withOpacity(.8),
+              size: 16,
             ),
           ),
         if (asset.isFavorite)

mobile/lib/widgets/asset_grid/thumbnail_placeholder.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 
 class ThumbnailPlaceholder extends StatelessWidget {
   final EdgeInsets margin;
@@ -13,25 +14,20 @@ class ThumbnailPlaceholder extends StatelessWidget {
     this.height = 250,
   });
 
-  static const _brightColors = [
-    Color(0xFFF1F3F4),
-    Color(0xFFB4B6B8),
-  ];
-
-  static const _darkColors = [
-    Color(0xFF3B3F42),
-    Color(0xFF2B2F32),
-  ];
-
   @override
   Widget build(BuildContext context) {
+    var gradientColors = [
+      context.colorScheme.surfaceContainer,
+      context.colorScheme.surfaceContainer.darken(amount: .1),
+    ];
+
     return Container(
       width: width,
       height: height,
       margin: margin,
       decoration: BoxDecoration(
         gradient: LinearGradient(
-          colors: context.isDarkTheme ? _darkColors : _brightColors,
+          colors: gradientColors,
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,
         ),