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/album/album_action_filled_button.dart

@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 
-class AlbumActionOutlinedButton extends StatelessWidget {
+class AlbumActionFilledButton extends StatelessWidget {
   final VoidCallback? onPressed;
   final String labelText;
   final IconData iconData;
 
-  const AlbumActionOutlinedButton({
+  const AlbumActionFilledButton({
     super.key,
     this.onPressed,
     required this.labelText,
@@ -17,18 +17,13 @@ class AlbumActionOutlinedButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.only(right: 16.0),
-      child: OutlinedButton.icon(
-        style: OutlinedButton.styleFrom(
+      child: FilledButton.icon(
+        style: FilledButton.styleFrom(
           padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(25),
           ),
-          side: BorderSide(
-            width: 1,
-            color: context.isDarkTheme
-                ? const Color.fromARGB(255, 63, 63, 63)
-                : const Color.fromARGB(255, 206, 206, 206),
-          ),
+          backgroundColor: context.colorScheme.surfaceContainerHigh,
         ),
         icon: Icon(
           iconData,

mobile/lib/widgets/album/album_thumbnail_card.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/entities/album.entity.dart';
 import 'package:immich_mobile/entities/store.entity.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/widgets/common/immich_thumbnail.dart';
 
 class AlbumThumbnailCard extends StatelessWidget {
@@ -23,8 +24,6 @@ class AlbumThumbnailCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var isDarkTheme = context.isDarkTheme;
-
     return LayoutBuilder(
       builder: (context, constraints) {
         var cardSize = constraints.maxWidth;
@@ -34,12 +33,13 @@ class AlbumThumbnailCard extends StatelessWidget {
             height: cardSize,
             width: cardSize,
             decoration: BoxDecoration(
-              color: isDarkTheme ? Colors.grey[800] : Colors.grey[200],
+              color: context.colorScheme.surfaceContainerHigh,
             ),
             child: Center(
               child: Icon(
                 Icons.no_photography,
                 size: cardSize * .15,
+                color: context.colorScheme.primary,
               ),
             ),
           );
@@ -65,6 +65,9 @@ class AlbumThumbnailCard extends StatelessWidget {
           return RichText(
             overflow: TextOverflow.fade,
             text: TextSpan(
+              style: context.textTheme.bodyMedium?.copyWith(
+                color: context.colorScheme.onSurfaceSecondary,
+              ),
               children: [
                 TextSpan(
                   text: album.assetCount == 1
@@ -72,14 +75,9 @@ class AlbumThumbnailCard extends StatelessWidget {
                           .tr(args: ['${album.assetCount}'])
                       : 'album_thumbnail_card_items'
                           .tr(args: ['${album.assetCount}']),
-                  style: context.textTheme.bodyMedium,
                 ),
                 if (owner != null) const TextSpan(text: ' · '),
-                if (owner != null)
-                  TextSpan(
-                    text: owner,
-                    style: context.textTheme.bodyMedium,
-                  ),
+                if (owner != null) TextSpan(text: owner),
               ],
             ),
           );
@@ -112,7 +110,7 @@ class AlbumThumbnailCard extends StatelessWidget {
                           album.name,
                           overflow: TextOverflow.ellipsis,
                           style: context.textTheme.bodyMedium?.copyWith(
-                            color: context.primaryColor,
+                            color: context.colorScheme.onSurface,
                             fontWeight: FontWeight.w500,
                           ),
                         ),

mobile/lib/widgets/album/album_title_text_field.dart

@@ -20,8 +20,6 @@ class AlbumTitleTextField extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final isDarkTheme = context.isDarkTheme;
-
     return TextField(
       onChanged: (v) {
         if (v.isEmpty) {
@@ -35,7 +33,7 @@ class AlbumTitleTextField extends ConsumerWidget {
       focusNode: albumTitleTextFieldFocusNode,
       style: TextStyle(
         fontSize: 28,
-        color: isDarkTheme ? Colors.grey[300] : Colors.grey[700],
+        color: context.colorScheme.onSurface,
         fontWeight: FontWeight.bold,
       ),
       controller: albumTitleController,
@@ -61,24 +59,18 @@ class AlbumTitleTextField extends ConsumerWidget {
                 splashRadius: 10,
               )
             : null,
-        enabledBorder: OutlineInputBorder(
-          borderSide: const BorderSide(color: Colors.transparent),
-          borderRadius: BorderRadius.circular(10),
+        enabledBorder: const OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.transparent),
         ),
-        focusedBorder: OutlineInputBorder(
-          borderSide: const BorderSide(color: Colors.transparent),
-          borderRadius: BorderRadius.circular(10),
+        focusedBorder: const OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.transparent),
         ),
         hintText: 'share_add_title'.tr(),
-        hintStyle: TextStyle(
+        hintStyle: context.themeData.inputDecorationTheme.hintStyle?.copyWith(
           fontSize: 28,
-          color: isDarkTheme ? Colors.grey[300] : Colors.grey[700],
-          fontWeight: FontWeight.bold,
         ),
         focusColor: Colors.grey[300],
-        fillColor: isDarkTheme
-            ? const Color.fromARGB(255, 32, 33, 35)
-            : Colors.grey[200],
+        fillColor: context.scaffoldBackgroundColor,
         filled: isAlbumTitleTextFieldFocus.value,
       ),
     );

mobile/lib/widgets/album/album_viewer_appbar.dart

@@ -95,7 +95,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
                   'action_common_confirm',
                   style: TextStyle(
                     fontWeight: FontWeight.bold,
-                    color: !context.isDarkTheme ? Colors.red : Colors.red[300],
+                    color: context.colorScheme.error,
                   ),
                 ).tr(),
               ),

mobile/lib/widgets/album/album_viewer_editable_title.dart

@@ -73,24 +73,18 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
                   splashRadius: 10,
                 )
               : null,
-          enabledBorder: OutlineInputBorder(
-            borderSide: const BorderSide(color: Colors.transparent),
-            borderRadius: BorderRadius.circular(10),
+          enabledBorder: const OutlineInputBorder(
+            borderSide: BorderSide(color: Colors.transparent),
           ),
-          focusedBorder: OutlineInputBorder(
-            borderSide: const BorderSide(color: Colors.transparent),
-            borderRadius: BorderRadius.circular(10),
+          focusedBorder: const OutlineInputBorder(
+            borderSide: BorderSide(color: Colors.transparent),
           ),
           focusColor: Colors.grey[300],
-          fillColor: context.isDarkTheme
-              ? const Color.fromARGB(255, 32, 33, 35)
-              : Colors.grey[200],
+          fillColor: context.scaffoldBackgroundColor,
           filled: titleFocusNode.hasFocus,
           hintText: 'share_add_title'.tr(),
-          hintStyle: TextStyle(
+          hintStyle: context.themeData.inputDecorationTheme.hintStyle?.copyWith(
             fontSize: 28,
-            color: context.isDarkTheme ? Colors.grey[300] : Colors.grey[700],
-            fontWeight: FontWeight.bold,
           ),
         ),
       ),