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/pages/common/album_options.page.dart

@@ -5,6 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:fluttertoast/fluttertoast.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/providers/album/shared_album.provider.dart';
 import 'package:immich_mobile/providers/authentication.provider.dart';
 import 'package:immich_mobile/utils/immich_loading_overlay.dart';
@@ -102,7 +103,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
       }
 
       showModalBottomSheet(
-        backgroundColor: context.scaffoldBackgroundColor,
+        backgroundColor: context.colorScheme.surfaceContainer,
         isScrollControlled: false,
         context: context,
         builder: (context) {
@@ -131,7 +132,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
         ),
         subtitle: Text(
           album.owner.value?.email ?? "",
-          style: TextStyle(color: Colors.grey[600]),
+          style: TextStyle(color: context.colorScheme.onSurfaceSecondary),
         ),
         trailing: Text(
           "shared_album_section_people_owner_label",
@@ -160,7 +161,9 @@ class AlbumOptionsPage extends HookConsumerWidget {
             ),
             subtitle: Text(
               user.email,
-              style: TextStyle(color: Colors.grey[600]),
+              style: TextStyle(
+                color: context.colorScheme.onSurfaceSecondary,
+              ),
             ),
             trailing: userId == user.id || isOwner
                 ? const Icon(Icons.more_horiz_rounded)
@@ -214,7 +217,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
               subtitle: Text(
                 "shared_album_activity_setting_subtitle",
                 style: context.textTheme.labelLarge?.copyWith(
-                  color: context.textTheme.labelLarge?.color?.withAlpha(175),
+                  color: context.colorScheme.onSurfaceSecondary,
                 ),
               ).tr(),
             ),

mobile/lib/pages/common/album_viewer.page.dart

@@ -14,7 +14,7 @@ import 'package:immich_mobile/providers/album/current_album.provider.dart';
 import 'package:immich_mobile/providers/album/shared_album.provider.dart';
 import 'package:immich_mobile/utils/immich_loading_overlay.dart';
 import 'package:immich_mobile/services/album.service.dart';
-import 'package:immich_mobile/widgets/album/album_action_outlined_button.dart';
+import 'package:immich_mobile/widgets/album/album_action_filled_button.dart';
 import 'package:immich_mobile/widgets/album/album_viewer_editable_title.dart';
 import 'package:immich_mobile/providers/multiselect.provider.dart';
 import 'package:immich_mobile/providers/authentication.provider.dart';
@@ -114,13 +114,13 @@ class AlbumViewerPage extends HookConsumerWidget {
           child: ListView(
             scrollDirection: Axis.horizontal,
             children: [
-              AlbumActionOutlinedButton(
+              AlbumActionFilledButton(
                 iconData: Icons.add_photo_alternate_outlined,
                 onPressed: () => onAddPhotosPressed(album),
                 labelText: "share_add_photos".tr(),
               ),
               if (userId == album.ownerId)
-                AlbumActionOutlinedButton(
+                AlbumActionFilledButton(
                   iconData: Icons.person_add_alt_rounded,
                   onPressed: () => onAddUsersPressed(album),
                   labelText: "album_viewer_page_share_add_users".tr(),

mobile/lib/pages/common/app_log.page.dart

@@ -3,6 +3,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/routing/router.dart';
 import 'package:immich_mobile/entities/logger_message.entity.dart';
 import 'package:immich_mobile/services/immich_logger.service.dart';
@@ -18,7 +19,6 @@ class AppLogPage extends HookConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final immichLogger = ImmichLogger();
     final logMessages = useState(immichLogger.messages);
-    final isDarkTheme = context.isDarkTheme;
 
     Widget colorStatusIndicator(Color color) {
       return Column(
@@ -55,13 +55,9 @@ class AppLogPage extends HookConsumerWidget {
         case LogLevel.INFO:
           return Colors.transparent;
         case LogLevel.SEVERE:
-          return isDarkTheme
-              ? Colors.redAccent.withOpacity(0.25)
-              : Colors.redAccent.withOpacity(0.075);
+          return Colors.redAccent.withOpacity(0.25);
         case LogLevel.WARNING:
-          return isDarkTheme
-              ? Colors.orangeAccent.withOpacity(0.25)
-              : Colors.orangeAccent.withOpacity(0.075);
+          return Colors.orangeAccent.withOpacity(0.25);
         default:
           return context.primaryColor.withOpacity(0.1);
       }
@@ -120,10 +116,7 @@ class AppLogPage extends HookConsumerWidget {
       ),
       body: ListView.separated(
         separatorBuilder: (context, index) {
-          return Divider(
-            height: 0,
-            color: isDarkTheme ? Colors.white70 : Colors.grey[600],
-          );
+          return const Divider(height: 0);
         },
         itemCount: logMessages.value.length,
         itemBuilder: (context, index) {
@@ -141,8 +134,9 @@ class AppLogPage extends HookConsumerWidget {
             minLeadingWidth: 10,
             title: Text(
               truncateLogMessage(logMessage.message, 4),
-              style: const TextStyle(
+              style: TextStyle(
                 fontSize: 14.0,
+                color: context.colorScheme.onSurface,
                 fontFamily: "Inconsolata",
               ),
             ),
@@ -150,7 +144,7 @@ class AppLogPage extends HookConsumerWidget {
               "at ${DateFormat("HH:mm:ss.SSS").format(logMessage.createdAt)} in ${logMessage.context1}",
               style: TextStyle(
                 fontSize: 12.0,
-                color: Colors.grey[600],
+                color: context.colorScheme.onSurfaceSecondary,
               ),
             ),
             leading: buildLeadingIcon(logMessage.level),

mobile/lib/pages/common/app_log_detail.page.dart

@@ -13,8 +13,6 @@ class AppLogDetailPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    var isDarkTheme = context.isDarkTheme;
-
     buildTextWithCopyButton(String header, String text) {
       return Padding(
         padding: const EdgeInsets.all(8.0),
@@ -61,7 +59,7 @@ class AppLogDetailPage extends HookConsumerWidget {
             ),
             Container(
               decoration: BoxDecoration(
-                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                color: context.colorScheme.surfaceContainerHigh,
                 borderRadius: BorderRadius.circular(15.0),
               ),
               child: Padding(
@@ -100,7 +98,7 @@ class AppLogDetailPage extends HookConsumerWidget {
             ),
             Container(
               decoration: BoxDecoration(
-                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                color: context.colorScheme.surfaceContainerHigh,
                 borderRadius: BorderRadius.circular(15.0),
               ),
               child: Padding(

mobile/lib/pages/common/create_album.page.dart

@@ -10,7 +10,7 @@ import 'package:immich_mobile/providers/album/album.provider.dart';
 import 'package:immich_mobile/providers/album/album_title.provider.dart';
 import 'package:immich_mobile/providers/asset.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/widgets/album/album_action_outlined_button.dart';
+import 'package:immich_mobile/widgets/album/album_action_filled_button.dart';
 import 'package:immich_mobile/widgets/album/album_title_text_field.dart';
 import 'package:immich_mobile/widgets/album/shared_album_thumbnail_image.dart';
 
@@ -109,20 +109,16 @@ class CreateAlbumPage extends HookConsumerWidget {
       if (selectedAssets.value.isEmpty) {
         return SliverToBoxAdapter(
           child: Padding(
-            padding: const EdgeInsets.only(top: 16, left: 18, right: 18),
-            child: OutlinedButton.icon(
-              style: OutlinedButton.styleFrom(
+            padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
+            child: FilledButton.icon(
+              style: FilledButton.styleFrom(
                 alignment: Alignment.centerLeft,
                 padding:
-                    const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
-                side: BorderSide(
-                  color: context.isDarkTheme
-                      ? const Color.fromARGB(255, 63, 63, 63)
-                      : const Color.fromARGB(255, 129, 129, 129),
-                ),
+                    const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                 shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(5),
+                  borderRadius: BorderRadius.circular(10),
                 ),
+                backgroundColor: context.colorScheme.surfaceContainerHighest,
               ),
               onPressed: onSelectPhotosButtonPressed,
               icon: Icon(
@@ -134,7 +130,7 @@ class CreateAlbumPage extends HookConsumerWidget {
                 child: Text(
                   'create_shared_album_page_share_select_photos',
                   style: context.textTheme.titleMedium?.copyWith(
-                    color: context.primaryColor,
+                    fontWeight: FontWeight.normal,
                   ),
                 ).tr(),
               ),
@@ -154,7 +150,7 @@ class CreateAlbumPage extends HookConsumerWidget {
           child: ListView(
             scrollDirection: Axis.horizontal,
             children: [
-              AlbumActionOutlinedButton(
+              AlbumActionFilledButton(
                 iconData: Icons.add_photo_alternate_outlined,
                 onPressed: onSelectPhotosButtonPressed,
                 labelText: "share_add_photos".tr(),

mobile/lib/pages/common/settings.page.dart

@@ -49,10 +49,6 @@ class SettingsPage extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         centerTitle: false,
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(1),
-          child: Divider(height: 1),
-        ),
         title: const Text('setting_pages_app_bar_settings').tr(),
       ),
       body: context.isMobile ? _MobileLayout() : _TabletLayout(),
@@ -67,13 +63,18 @@ class _MobileLayout extends StatelessWidget {
       children: SettingSection.values
           .map(
             (s) => ListTile(
-              title: Text(
-                s.title,
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold,
-                ),
-              ).tr(),
+              contentPadding:
+                  const EdgeInsets.symmetric(vertical: 2.0, horizontal: 16.0),
               leading: Icon(s.icon),
+              title: Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Text(
+                  s.title,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                  ),
+                ).tr(),
+              ),
               onTap: () => context.pushRoute(SettingsSubRoute(section: s)),
             ),
           )
@@ -102,7 +103,7 @@ class _TabletLayout extends HookWidget {
                       leading: Icon(s.icon),
                       selected: s.index == selectedSection.value.index,
                       selectedColor: context.primaryColor,
-                      selectedTileColor: context.primaryColor.withAlpha(50),
+                      selectedTileColor: context.themeData.highlightColor,
                       onTap: () => selectedSection.value = s,
                     ),
                   ),