style: colors

refactor: theme provider to generator
Merge branch 'main' into refactor/mobile-colors
2023-12-03 23:54:47 +05:30 · 2023-12-03 23:08:10 +05:30 · 2023-12-03 23:02:28 +05:30 · 2023-11-19 12:04:25 +05:30 · 2023-11-19 11:54:42 +05:30 · 2023-11-11 15:11:12 +05:30
66 changed files with 712 additions and 700 deletions
--- a/mobile/lib/constants/immich_colors.dart
+++ b/mobile/lib/constants/immich_colors.dart
@ -1,5 +0,0 @@
-import 'package:flutter/material.dart';
-
-const Color immichBackgroundColor = Color(0xFFf6f8fe);
-const Color immichDarkBackgroundColor = Color.fromARGB(255, 0, 0, 0);
-const Color immichDarkThemePrimaryColor = Color.fromARGB(255, 173, 203, 250);
--- a/mobile/lib/extensions/build_context_extensions.dart
+++ b/mobile/lib/extensions/build_context_extensions.dart
@ -1,5 +1,7 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/utils/immich_app_theme.dart';

 extension ContextHelper on BuildContext {
  // Returns the current size from MediaQuery
@ -32,6 +34,12 @@ extension ContextHelper on BuildContext {
  // Current ColorScheme used
  ColorScheme get colorScheme => themeData.colorScheme;

+  // Red Accent harmonized with primary color
+  Color get redColor => redAccent.harmonizeWith(primaryColor);
+
+  // Orange Accent harmonized with primary color
+  Color get orangeColor => orangeAccent.harmonizeWith(primaryColor);
+
  // Pop-out from the current context with optional result
  void pop<T>([T? result]) => Navigator.of(this).pop(result);

--- a/mobile/lib/extensions/color_extensions.dart
+++ b/mobile/lib/extensions/color_extensions.dart
@ -0,0 +1,27 @@
+import 'dart:ui';
+
+extension LightenDarken on Color {
+  /// Darken a color by [percent] amount (100 = black)
+  Color darken([int percent = 10]) {
+    assert(1 <= percent && percent <= 100);
+    var f = 1 - percent / 100;
+    return Color.fromARGB(
+      alpha,
+      (red * f).round(),
+      (green * f).round(),
+      (blue * f).round(),
+    );
+  }
+
+  /// Lighten a color by [percent] amount (100 = white)
+  Color lighten([int percent = 10]) {
+    assert(1 <= percent && percent <= 100);
+    var p = percent / 100;
+    return Color.fromARGB(
+      alpha,
+      red + ((255 - red) * p).round(),
+      green + ((255 - green) * p).round(),
+      blue + ((255 - blue) * p).round(),
+    );
+  }
+}
--- a/mobile/lib/main.dart
+++ b/mobile/lib/main.dart
@ -9,6 +9,7 @@ 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/shared/providers/theme.provider.dart';
 import 'package:timezone/data/latest.dart';
 import 'package:immich_mobile/constants/locales.dart';
 import 'package:immich_mobile/modules/backup/background_service/background.service.dart';
--- a/mobile/lib/modules/activities/views/activities_page.dart
+++ b/mobile/lib/modules/activities/views/activities_page.dart
@ -50,9 +50,8 @@ class ActivitiesPage extends HookConsumerWidget {
    );

    buildTitleWithTimestamp(Activity activity, {bool leftAlign = true}) {
-      final textColor = context.isDarkTheme ? Colors.white : Colors.black;
-      final textStyle = context.textTheme.bodyMedium
-          ?.copyWith(color: textColor.withOpacity(0.6));
+      final textStyle = context.textTheme.bodyMedium?.copyWith(
+          color: context.textTheme.bodyMedium?.color?.withOpacity(0.6),);

      return Row(
        mainAxisAlignment: leftAlign
@ -150,14 +149,14 @@ class ActivitiesPage extends HookConsumerWidget {
                },
              ),
            ),
-            suffixIconColor: liked ? Colors.red[700] : null,
+            suffixIconColor: liked ? context.redColor : null,
            hintText: isReadOnly
                ? 'shared_album_activities_input_disable'.tr()
                : 'shared_album_activities_input_hint'.tr(),
            hintStyle: TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 14,
-              color: Colors.grey[600],
+              color: context.themeData.hintColor,
            ),
          ),
          onEditingComplete: () async {
@ -200,27 +199,31 @@ class ActivitiesPage extends HookConsumerWidget {
        onDismissed: (direction) async =>
            await ref.read(provider.notifier).removeActivity(activity.id),
        background: Container(
-          color: canDelete ? Colors.red[400] : Colors.grey[600],
+          color: canDelete
+              ? context.colorScheme.error
+              : context.themeData.disabledColor,
          alignment: AlignmentDirectional.centerStart,
          child: canDelete
-              ? const Padding(
-                  padding: EdgeInsets.all(15),
+              ? Padding(
+                  padding: const EdgeInsets.all(15),
                  child: Icon(
                    Icons.delete_sweep_rounded,
-                    color: Colors.black,
+                    color: context.colorScheme.surface,
                  ),
                )
              : null,
        ),
        secondaryBackground: Container(
-          color: canDelete ? Colors.red[400] : Colors.grey[600],
+          color: canDelete
+              ? context.colorScheme.error
+              : context.themeData.disabledColor,
          alignment: AlignmentDirectional.centerEnd,
          child: canDelete
-              ? const Padding(
-                  padding: EdgeInsets.all(15),
+              ? Padding(
+                  padding: const EdgeInsets.all(15),
                  child: Icon(
                    Icons.delete_sweep_rounded,
-                    color: Colors.black,
+                    color: context.colorScheme.surface,
                  ),
                )
              : null,
@ -285,7 +288,7 @@ class ActivitiesPage extends HookConsumerWidget {
                                  alignment: Alignment.center,
                                  child: Icon(
                                    Icons.favorite_rounded,
-                                    color: Colors.red[700],
+                                    color: context.redColor,
                                  ),
                                ),
                                title: buildTitleWithTimestamp(activity),
--- a/mobile/lib/modules/album/ui/album_thumbnail_card.dart
+++ b/mobile/lib/modules/album/ui/album_thumbnail_card.dart
@ -23,32 +23,38 @@ class AlbumThumbnailCard extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    var isDarkTheme = context.isDarkTheme;
-
    return LayoutBuilder(
      builder: (context, constraints) {
        var cardSize = constraints.maxWidth;

        buildEmptyThumbnail() {
-          return Container(
+          return SizedBox(
            height: cardSize,
            width: cardSize,
-            decoration: BoxDecoration(
-              color: isDarkTheme ? Colors.grey[800] : Colors.grey[200],
-            ),
-            child: Center(
-              child: Icon(
-                Icons.no_photography,
-                size: cardSize * .15,
+            child: Card(
+              shape: const RoundedRectangleBorder(
+                borderRadius: BorderRadius.all(Radius.circular(20.0)),
+              ),
+              child: Center(
+                child: Icon(
+                  Icons.no_photography,
+                  size: cardSize * .15,
+                ),
              ),
            ),
          );
        }

-        buildAlbumThumbnail() => ImmichImage(
-              album.thumbnail.value,
-              width: cardSize,
-              height: cardSize,
+        buildAlbumThumbnail() => Card(
+              clipBehavior: Clip.hardEdge,
+              shape: const RoundedRectangleBorder(
+                borderRadius: BorderRadius.all(Radius.circular(20)),
+              ),
+              child: ImmichImage(
+                album.thumbnail.value,
+                width: cardSize,
+                height: cardSize,
+              ),
            );

        buildAlbumTextRow() {
@ -62,9 +68,9 @@ class AlbumThumbnailCard extends StatelessWidget {
            }
          }

-          return RichText(
+          return Text.rich(
            overflow: TextOverflow.fade,
-            text: TextSpan(
+            TextSpan(
              children: [
                TextSpan(
                  text: album.assetCount == 1
@ -78,7 +84,9 @@ class AlbumThumbnailCard extends StatelessWidget {
                if (owner != null)
                  TextSpan(
                    text: owner,
-                    style: context.textTheme.bodyMedium,
+                    style: context.textTheme.bodyMedium?.copyWith(
+                      color: context.colorScheme.onSurface,
+                    ),
                  ),
              ],
            ),
@ -87,40 +95,36 @@ class AlbumThumbnailCard extends StatelessWidget {

        return GestureDetector(
          onTap: onTap,
-          child: Flex(
-            direction: Axis.vertical,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
-              Flexible(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    SizedBox(
-                      width: cardSize,
-                      height: cardSize,
-                      child: ClipRRect(
-                        borderRadius: BorderRadius.circular(20),
-                        child: album.thumbnail.value == null
-                            ? buildEmptyThumbnail()
-                            : buildAlbumThumbnail(),
-                      ),
-                    ),
-                    Padding(
-                      padding: const EdgeInsets.only(top: 8.0),
-                      child: SizedBox(
-                        width: cardSize,
-                        child: Text(
-                          album.name,
-                          style: context.textTheme.bodyMedium?.copyWith(
-                            color: context.primaryColor,
-                            fontWeight: FontWeight.w500,
-                          ),
-                        ),
-                      ),
-                    ),
-                    buildAlbumTextRow(),
-                  ],
+              SizedBox(
+                width: cardSize,
+                height: cardSize,
+                child: ClipRRect(
+                  borderRadius: const BorderRadius.all(Radius.circular(20)),
+                  child: album.thumbnail.value == null
+                      ? buildEmptyThumbnail()
+                      : buildAlbumThumbnail(),
                ),
              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 8.0, left: 8.0),
+                child: SizedBox(
+                  width: cardSize,
+                  child: Text(
+                    album.name,
+                    style: context.textTheme.bodyMedium?.copyWith(
+                      color: context.primaryColor,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 2.0, left: 8.0),
+                child: buildAlbumTextRow(),
+              ),
            ],
          ),
        );
--- a/mobile/lib/modules/album/ui/album_thumbnail_listtile.dart
+++ b/mobile/lib/modules/album/ui/album_thumbnail_listtile.dart
@ -23,36 +23,46 @@ class AlbumThumbnailListTile extends StatelessWidget {
    var cardSize = 68.0;

    buildEmptyThumbnail() {
-      return Container(
-        decoration: BoxDecoration(
-          color: context.isDarkTheme ? Colors.grey[800] : Colors.grey[200],
-        ),
-        child: SizedBox(
-          height: cardSize,
-          width: cardSize,
-          child: const Center(
-            child: Icon(Icons.no_photography),
+      return SizedBox(
+        height: cardSize,
+        width: cardSize,
+        child: Card(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(20.0),
+          ),
+          child: Center(
+            child: Icon(
+              Icons.no_photography,
+              size: cardSize * .15,
+            ),
          ),
        ),
      );
    }

    buildAlbumThumbnail() {
-      return CachedNetworkImage(
-        width: cardSize,
-        height: cardSize,
-        fit: BoxFit.cover,
-        fadeInDuration: const Duration(milliseconds: 200),
-        imageUrl: getAlbumThumbnailUrl(
-          album,
-          type: ThumbnailFormat.JPEG,
+      return Card(
+        clipBehavior: Clip.hardEdge,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(12),
+        ),
+        child: CachedNetworkImage(
+          width: cardSize,
+          height: cardSize,
+          fit: BoxFit.cover,
+          fadeInDuration: const Duration(milliseconds: 200),
+          imageUrl: getAlbumThumbnailUrl(
+            album,
+            type: ThumbnailFormat.JPEG,
+          ),
+          httpHeaders: {
+            "Authorization": "Bearer ${Store.get(StoreKey.accessToken)}",
+          },
+          cacheKey:
+              getAlbumThumbNailCacheKey(album, type: ThumbnailFormat.JPEG),
+          errorWidget: (context, url, error) =>
+              const Icon(Icons.image_not_supported_outlined),
        ),
-        httpHeaders: {
-          "Authorization": "Bearer ${Store.get(StoreKey.accessToken)}",
-        },
-        cacheKey: getAlbumThumbNailCacheKey(album, type: ThumbnailFormat.JPEG),
-        errorWidget: (context, url, error) =>
-            const Icon(Icons.image_not_supported_outlined),
      );
    }

--- a/mobile/lib/modules/album/ui/album_title_text_field.dart
+++ b/mobile/lib/modules/album/ui/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) {
@ -33,9 +31,8 @@ class AlbumTitleTextField extends ConsumerWidget {
        ref.watch(albumTitleProvider.notifier).setAlbumTitle(v);
      },
      focusNode: albumTitleTextFieldFocusNode,
-      style: TextStyle(
+      style: const TextStyle(
        fontSize: 28,
-        color: isDarkTheme ? Colors.grey[300] : Colors.grey[700],
        fontWeight: FontWeight.bold,
      ),
      controller: albumTitleController,
@ -70,15 +67,10 @@ class AlbumTitleTextField extends ConsumerWidget {
          borderRadius: BorderRadius.circular(10),
        ),
        hintText: 'share_add_title'.tr(),
-        hintStyle: TextStyle(
+        hintStyle: const TextStyle(
          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],
        filled: isAlbumTitleTextFieldFocus.value,
      ),
    );
--- a/mobile/lib/modules/album/ui/album_viewer_appbar.dart
+++ b/mobile/lib/modules/album/ui/album_viewer_appbar.dart
@ -108,7 +108,7 @@ class AlbumViewerAppbar extends HookConsumerWidget
                  'Confirm',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
-                    color: !context.isDarkTheme ? Colors.red : Colors.red[300],
+                    color: context.colorScheme.error,
                  ),
                ),
              ),
--- a/mobile/lib/modules/album/ui/album_viewer_editable_title.dart
+++ b/mobile/lib/modules/album/ui/album_viewer_editable_title.dart
@ -78,15 +78,10 @@ class AlbumViewerEditableTitle extends HookConsumerWidget {
          borderSide: const BorderSide(color: Colors.transparent),
          borderRadius: BorderRadius.circular(10),
        ),
-        focusColor: Colors.grey[300],
-        fillColor: context.isDarkTheme
-            ? const Color.fromARGB(255, 32, 33, 35)
-            : Colors.grey[200],
        filled: titleFocusNode.hasFocus,
        hintText: 'share_add_title'.tr(),
-        hintStyle: TextStyle(
+        hintStyle: const TextStyle(
          fontSize: 28,
-          color: context.isDarkTheme ? Colors.grey[300] : Colors.grey[700],
          fontWeight: FontWeight.bold,
        ),
      ),
--- a/mobile/lib/modules/album/views/album_options_part.dart
+++ b/mobile/lib/modules/album/views/album_options_part.dart
@ -4,6 +4,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/color_extensions.dart';
 import 'package:immich_mobile/modules/album/providers/shared_album.provider.dart';
 import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
@ -129,7 +130,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
        ),
        subtitle: Text(
          album.owner.value?.email ?? "",
-          style: TextStyle(color: Colors.grey[600]),
+          style: TextStyle(color: context.colorScheme.onSurface.darken(40)),
        ),
        trailing: Text(
          "shared_album_section_people_owner_label",
@ -157,7 +158,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
            ),
            subtitle: Text(
              user.email,
-              style: TextStyle(color: Colors.grey[600]),
+              style: TextStyle(color: context.colorScheme.onSurface.darken(40)),
            ),
            trailing: userId == user.id || isOwner
                ? const Icon(Icons.more_horiz_rounded)
@ -201,9 +202,6 @@ class AlbumOptionsPage extends HookConsumerWidget {
                  album.activityEnabled = value;
                }
              },
-              activeColor: activityEnabled.value
-                  ? context.primaryColor
-                  : context.themeData.disabledColor,
              dense: true,
              title: Text(
                "shared_album_activity_setting_title",
--- a/mobile/lib/modules/album/views/album_viewer_page.dart
+++ b/mobile/lib/modules/album/views/album_viewer_page.dart
@ -148,7 +148,7 @@ class AlbumViewerPage extends HookConsumerWidget {
                titleFocusNode: titleFocusNode,
              )
            : Padding(
-                padding: const EdgeInsets.only(left: 8.0),
+                padding: const EdgeInsets.only(left: 8.0, bottom: 20.0),
                child: Text(
                  album.name,
                  style: context.textTheme.headlineMedium,
--- a/mobile/lib/modules/album/views/library_page.dart
+++ b/mobile/lib/modules/album/views/library_page.dart
@ -4,6 +4,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/color_extensions.dart';
 import 'package:immich_mobile/modules/album/providers/album.provider.dart';
 import 'package:immich_mobile/modules/album/ui/album_thumbnail_card.dart';
 import 'package:immich_mobile/routing/router.dart';
@ -21,7 +22,6 @@ class LibraryPage extends HookConsumerWidget {
    final trashEnabled =
        ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
    final albums = ref.watch(albumProvider);
-    var isDarkTheme = context.isDarkTheme;
    var settings = ref.watch(appSettingsServiceProvider);

    useEffect(
@ -102,9 +102,8 @@ class LibraryPage extends HookConsumerWidget {
                  ),
                  Text(
                    option,
-                    style: TextStyle(
+                    style: context.textTheme.displaySmall?.copyWith(
                      color: selected ? context.primaryColor : null,
-                      fontSize: 12.0,
                    ),
                  ),
                ],
@ -135,49 +134,50 @@ class LibraryPage extends HookConsumerWidget {
    }

    Widget buildCreateAlbumButton() {
-      return GestureDetector(
-        onTap: () {
-          context.autoPush(CreateAlbumRoute(isSharedAlbum: false));
+      return LayoutBuilder(
+        builder: (context, constraints) {
+          return GestureDetector(
+            onTap: () =>
+                context.autoPush(CreateAlbumRoute(isSharedAlbum: false)),
+            child: Padding(
+              padding: const EdgeInsets.only(bottom: 32),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SizedBox.square(
+                    dimension: constraints.maxWidth,
+                    child: Card(
+                      clipBehavior: Clip.hardEdge,
+                      shape: const RoundedRectangleBorder(
+                        borderRadius: BorderRadius.all(Radius.circular(20)),
+                      ),
+                      color: context.themeData.cardColor.lighten(5),
+                      child: Center(
+                        child: Icon(
+                          Icons.add_rounded,
+                          size: 28,
+                          color: context.primaryColor,
+                        ),
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(
+                      top: 8.0,
+                      bottom: 16,
+                      left: 8.0,
+                    ),
+                    child: Text(
+                      'library_page_new_album',
+                      style: context.textTheme.labelLarge,
+                    ).tr(),
+                  ),
+                ],
+              ),
+            ),
+          );
        },
-        child: Padding(
-          padding: const EdgeInsets.only(bottom: 32),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.start,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Expanded(
-                child: Container(
-                  decoration: BoxDecoration(
-                    border: Border.all(
-                      color: isDarkTheme
-                          ? const Color.fromARGB(255, 53, 53, 53)
-                          : const Color.fromARGB(255, 203, 203, 203),
-                    ),
-                    color: isDarkTheme ? Colors.grey[900] : Colors.grey[50],
-                    borderRadius: BorderRadius.circular(20),
-                  ),
-                  child: Center(
-                    child: Icon(
-                      Icons.add_rounded,
-                      size: 28,
-                      color: context.primaryColor,
-                    ),
-                  ),
-                ),
-              ),
-              Padding(
-                padding: const EdgeInsets.only(
-                  top: 8.0,
-                  bottom: 16,
-                ),
-                child: Text(
-                  'library_page_new_album',
-                  style: context.textTheme.labelLarge,
-                ).tr(),
-              ),
-            ],
-          ),
-        ),
      );
    }

@ -187,30 +187,17 @@ class LibraryPage extends HookConsumerWidget {
      Function() onClick,
    ) {
      return Expanded(
-        child: OutlinedButton.icon(
+        child: ElevatedButton.icon(
          onPressed: onClick,
          label: Padding(
            padding: const EdgeInsets.only(left: 8.0),
-            child: Text(
-              label,
-              style: TextStyle(
-                color: context.isDarkTheme
-                    ? Colors.white
-                    : Colors.black.withAlpha(200),
-              ),
-            ),
+            child: Text(label),
          ),
-          style: OutlinedButton.styleFrom(
-            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
-            backgroundColor: isDarkTheme ? Colors.grey[900] : Colors.grey[50],
-            side: BorderSide(
-              color: isDarkTheme ? Colors.grey[800]! : Colors.grey[300]!,
-            ),
+          style: context.themeData.elevatedButtonTheme.style?.copyWith(
            alignment: Alignment.centerLeft,
          ),
          icon: Icon(
            icon,
-            color: context.primaryColor,
          ),
        ),
      );
@ -224,7 +211,7 @@ class LibraryPage extends HookConsumerWidget {
      return trashEnabled
          ? InkWell(
              onTap: () => context.autoPush(const TrashRoute()),
-              borderRadius: BorderRadius.circular(12),
+              borderRadius: const BorderRadius.all(Radius.circular(12)),
              child: const Icon(
                Icons.delete_rounded,
                size: 25,
@ -250,8 +237,8 @@ class LibraryPage extends HookConsumerWidget {
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
-                  buildLibraryNavButton(
-                      "library_page_favorites".tr(), Icons.favorite_border, () {
+                  buildLibraryNavButton("library_page_favorites".tr(),
+                      Icons.favorite_outline_rounded, () {
                    context.autoNavigate(const FavoritesRoute());
                  }),
                  const SizedBox(width: 12.0),
@ -290,7 +277,6 @@ class LibraryPage extends HookConsumerWidget {
            sliver: SliverGrid(
              gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 250,
-                mainAxisSpacing: 12,
                crossAxisSpacing: 12,
                childAspectRatio: .7,
              ),
--- a/mobile/lib/modules/album/views/select_additional_user_for_sharing_page.dart
+++ b/mobile/lib/modules/album/views/select_additional_user_for_sharing_page.dart
@ -29,9 +29,11 @@ class SelectAdditionalUserForSharingPage extends HookConsumerWidget {
      if (sharedUsersList.value.contains(user)) {
        return CircleAvatar(
          backgroundColor: context.primaryColor,
-          child: const Icon(
+          radius: 22,
+          child: Icon(
            Icons.check_rounded,
-            size: 25,
+            color: context.colorScheme.surface,
+            size: 24,
          ),
        );
      } else {
@ -49,14 +51,10 @@ class SelectAdditionalUserForSharingPage extends HookConsumerWidget {
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Chip(
-              backgroundColor: context.primaryColor.withOpacity(0.15),
+              backgroundColor: context.colorScheme.primaryContainer,
              label: Text(
                user.email,
-                style: const TextStyle(
-                  fontSize: 12,
-                  color: Colors.black87,
-                  fontWeight: FontWeight.bold,
-                ),
+                style: context.textTheme.displaySmall,
              ),
            ),
          ),
@ -72,9 +70,9 @@ class SelectAdditionalUserForSharingPage extends HookConsumerWidget {
            padding: const EdgeInsets.all(16.0),
            child: Text(
              'select_additional_user_for_sharing_page_suggestions'.tr(),
-              style: const TextStyle(
+              style: TextStyle(
                fontSize: 14,
-                color: Colors.grey,
+                color: context.themeData.hintColor,
                fontWeight: FontWeight.bold,
              ),
            ),
--- a/mobile/lib/modules/album/views/select_user_for_sharing_page.dart
+++ b/mobile/lib/modules/album/views/select_user_for_sharing_page.dart
@ -56,9 +56,11 @@ class SelectUserForSharingPage extends HookConsumerWidget {
      if (sharedUsersList.value.contains(user)) {
        return CircleAvatar(
          backgroundColor: context.primaryColor,
-          child: const Icon(
+          radius: 22,
+          child: Icon(
            Icons.check_rounded,
-            size: 25,
+            color: context.colorScheme.surface,
+            size: 24,
          ),
        );
      } else {
@ -76,14 +78,10 @@ class SelectUserForSharingPage extends HookConsumerWidget {
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Chip(
-              backgroundColor: context.primaryColor.withOpacity(0.15),
+              backgroundColor: context.colorScheme.primaryContainer,
              label: Text(
                user.email,
-                style: const TextStyle(
-                  fontSize: 12,
-                  color: Colors.black87,
-                  fontWeight: FontWeight.bold,
-                ),
+                style: context.textTheme.displaySmall,
              ),
            ),
          ),
@ -97,11 +95,11 @@ class SelectUserForSharingPage extends HookConsumerWidget {
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
-            child: const Text(
+            child: Text(
              'select_user_for_sharing_page_share_suggestions',
              style: TextStyle(
                fontSize: 14,
-                color: Colors.grey,
+                color: context.themeData.hintColor,
                fontWeight: FontWeight.bold,
              ),
            ).tr(),
--- a/mobile/lib/modules/album/views/sharing_page.dart
+++ b/mobile/lib/modules/album/views/sharing_page.dart
@ -128,6 +128,9 @@ class SharingPage extends HookConsumerWidget {
                  Icons.photo_album_outlined,
                  size: 20,
                ),
+                style: context.themeData.elevatedButtonTheme.style?.copyWith(
+                  alignment: Alignment.centerLeft,
+                ),
                label: const Text(
                  "sharing_silver_appbar_create_shared_album",
                  maxLines: 1,
@ -146,6 +149,9 @@ class SharingPage extends HookConsumerWidget {
                  Icons.link,
                  size: 20,
                ),
+                style: context.themeData.elevatedButtonTheme.style?.copyWith(
+                  alignment: Alignment.centerLeft,
+                ),
                label: const Text(
                  "sharing_silver_appbar_shared_links",
                  style: TextStyle(
@ -169,8 +175,8 @@ class SharingPage extends HookConsumerWidget {
            elevation: 0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
-              side: const BorderSide(
-                color: Colors.grey,
+              side: BorderSide(
+                color: context.themeData.hintColor,
                width: 0.5,
              ),
            ),
@ -191,7 +197,8 @@ class SharingPage extends HookConsumerWidget {
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'sharing_page_empty_list',
-                      style: context.textTheme.displaySmall,
+                      style: context.textTheme.displaySmall
+                          ?.copyWith(color: context.primaryColor),
                    ).tr(),
                  ),
                  Padding(
--- a/mobile/lib/modules/asset_viewer/ui/advanced_bottom_sheet.dart
+++ b/mobile/lib/modules/asset_viewer/ui/advanced_bottom_sheet.dart
@ -3,6 +3,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/shared/models/asset.dart';
+import 'package:immich_mobile/shared/ui/drag_sheet.dart';

 class AdvancedBottomSheet extends HookConsumerWidget {
  final Asset assetDetail;
@ -24,33 +25,47 @@ class AdvancedBottomSheet extends HookConsumerWidget {
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 8.0),
          child: LayoutBuilder(
-            builder: (context, constraints) {
+            builder: (ctx, constraints) {
              // One column
              return Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
+                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
-                  const SizedBox(height: 32.0),
-                  const Align(
-                    child: Text(
-                      "ADVANCED INFO",
-                      style: TextStyle(fontSize: 12.0),
+                  const Padding(
+                    padding: EdgeInsets.only(top: 15, bottom: 10),
+                    child: CustomDraggingHandle(),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 10),
+                    child: TextButton.icon(
+                      label: Text(
+                        "ADVANCED INFO",
+                        style: context.textTheme.displaySmall,
+                      ),
+                      icon: Icon(
+                        Icons.copy,
+                        size: 16.0,
+                        color: context.primaryColor,
+                      ),
+                      onPressed: () {
+                        Clipboard.setData(
+                          ClipboardData(text: assetDetail.toString()),
+                        ).then((_) {
+                          ScaffoldMessenger.of(ctx).showSnackBar(
+                            const SnackBar(
+                              content: Text("Copied to clipboard"),
+                              behavior: SnackBarBehavior.floating,
+                            ),
+                          );
+                        });
+                      },
                    ),
                  ),
-                  const SizedBox(height: 32.0),
                  Container(
                    decoration: BoxDecoration(
-                      color: context.isDarkTheme
-                          ? Colors.grey[900]
-                          : Colors.grey[200],
                      borderRadius: BorderRadius.circular(15.0),
                    ),
                    child: Padding(
-                      padding: const EdgeInsets.only(
-                        right: 16.0,
-                        left: 16,
-                        top: 8,
-                        bottom: 16,
-                      ),
+                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: ListView(
                        shrinkWrap: true,
                        children: [
--- a/mobile/lib/modules/asset_viewer/ui/description_input.dart
+++ b/mobile/lib/modules/asset_viewer/ui/description_input.dart
@ -20,7 +20,6 @@ class DescriptionInput extends HookConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    final textColor = context.isDarkTheme ? Colors.white : Colors.black;
    final controller = useTextEditingController();
    final focusNode = useFocusNode();
    final isFocus = useState(false);
@ -68,7 +67,7 @@ class DescriptionInput extends HookConsumerWidget {
        },
        icon: Icon(
          Icons.cancel_rounded,
-          color: Colors.grey[500],
+          color: context.themeData.hintColor,
        ),
        splashRadius: 10,
      );
@ -98,7 +97,7 @@ class DescriptionInput extends HookConsumerWidget {
        hintText: 'description_input_hint_text'.tr(),
        border: InputBorder.none,
        hintStyle: context.textTheme.labelLarge?.copyWith(
-          color: textColor.withOpacity(0.5),
+          color: context.colorScheme.onSurface.withOpacity(0.5),
        ),
        suffixIcon: suffixIcon,
      ),
--- a/mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart
+++ b/mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart
@ -112,7 +112,7 @@ class ExifBottomSheet extends HookConsumerWidget {
  Widget build(BuildContext context, WidgetRef ref) {
    final assetWithExif = ref.watch(assetDetailProvider(asset));
    final exifInfo = (assetWithExif.value ?? asset).exifInfo;
-    var textColor = context.isDarkTheme ? Colors.white : Colors.black;
+    var textColor = context.colorScheme.onSurface;

    buildMap() {
      return Padding(
--- a/mobile/lib/modules/backup/ui/current_backup_asset_info_box.dart
+++ b/mobile/lib/modules/backup/ui/current_backup_asset_info_box.dart
@ -61,7 +61,7 @@ class CurrentUploadingAssetInfoBox extends HookConsumerWidget {
    Widget buildAssetInfoTable() {
      return Table(
        border: TableBorder.all(
-          color: context.themeData.primaryColorLight,
+          color: context.colorScheme.onSurfaceVariant,
          width: 1,
        ),
        children: [
--- a/mobile/lib/modules/backup/views/backup_album_selection_page.dart
+++ b/mobile/lib/modules/backup/views/backup_album_selection_page.dart
@ -2,7 +2,6 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/immich_colors.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/modules/backup/ui/album_info_card.dart';
@ -135,13 +134,12 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                album.name,
                style: TextStyle(
                  fontSize: 12,
-                  color: isDarkTheme ? Colors.black : immichBackgroundColor,
+                  color: context.colorScheme.surface,
                  fontWeight: FontWeight.bold,
                ),
              ),
              backgroundColor: Colors.red[300],
-              deleteIconColor:
-                  isDarkTheme ? Colors.black : immichBackgroundColor,
+              deleteIconColor: context.colorScheme.surface,
              deleteIcon: const Icon(
                Icons.cancel_rounded,
                size: 15,
--- a/mobile/lib/modules/backup/views/backup_controller_page.dart
+++ b/mobile/lib/modules/backup/views/backup_controller_page.dart
@ -674,7 +674,6 @@ class BackupControllerPage extends HookConsumerWidget {

    return Scaffold(
      appBar: AppBar(
-        elevation: 0,
        title: const Text(
          "backup_controller_page_backup",
        ).tr(),
--- a/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart
@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';

-class DisableMultiSelectButton extends ConsumerWidget {
+class DisableMultiSelectButton extends StatelessWidget {
  const DisableMultiSelectButton({
    Key? key,
    required this.onPressed,
@ -12,25 +12,29 @@ class DisableMultiSelectButton extends ConsumerWidget {
  final int selectedItemCount;

  @override
-  Widget build(BuildContext context, WidgetRef ref) {
+  Widget build(BuildContext context) {
    return Padding(
-        padding: const EdgeInsets.only(left: 16.0, top: 16.0),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 4.0),
-          child: ElevatedButton.icon(
-            onPressed: () {
-              onPressed();
-            },
-            icon: const Icon(Icons.close_rounded),
-            label: Text(
-              '$selectedItemCount',
-              style: const TextStyle(
-                fontWeight: FontWeight.w600,
-                fontSize: 18,
-              ),
+      padding: const EdgeInsets.only(left: 16.0, top: 16.0),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 4.0),
+        child: ElevatedButton.icon(
+          style: ElevatedButton.styleFrom(
+            foregroundColor: context.colorScheme.surface,
+            backgroundColor: context.primaryColor,
+          ),
+          onPressed: () {
+            onPressed();
+          },
+          icon: const Icon(Icons.close_rounded),
+          label: Text(
+            '$selectedItemCount',
+            style: const TextStyle(
+              fontWeight: FontWeight.w600,
+              fontSize: 18,
            ),
          ),
        ),
+      ),
    );
  }
 }
--- a/mobile/lib/modules/home/ui/asset_grid/draggable_scrollbar_custom.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/draggable_scrollbar_custom.dart
@ -6,6 +6,7 @@ import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 /// Build the Scroll Thumb and label using the current configuration
 typedef ScrollThumbBuilder = Widget Function(
  Color backgroundColor,
+  Color foregroundColor,
  Animation<double> thumbAnimation,
  Animation<double> labelAnimation,
  double height, {
@ -33,6 +34,9 @@ class DraggableScrollbar extends StatefulWidget {
  /// The background color of the label and thumb
  final Color backgroundColor;

+  /// The foreground color of the arrows in the thumb
+  final Color foregroundColor;
+
  /// The amount of padding that should surround the thumb
  final EdgeInsetsGeometry? padding;

@ -66,6 +70,7 @@ class DraggableScrollbar extends StatefulWidget {
    required this.scrollStateListener,
    this.heightScrollThumb = 48.0,
    this.backgroundColor = Colors.white,
+    this.foregroundColor = Colors.white,
    this.padding,
    this.scrollbarAnimationDuration = const Duration(milliseconds: 300),
    this.scrollbarTimeToFade = const Duration(milliseconds: 600),
@ -85,6 +90,7 @@ class DraggableScrollbar extends StatefulWidget {
  static buildScrollThumbAndLabel({
    required Widget scrollThumb,
    required Color backgroundColor,
+    required Color foregroundColor,
    required Animation<double>? thumbAnimation,
    required Animation<double>? labelAnimation,
    required Text? labelText,
@ -123,6 +129,7 @@ class DraggableScrollbar extends StatefulWidget {
  ) {
    return (
      Color backgroundColor,
+      Color foregroundColor,
      Animation<double> thumbAnimation,
      Animation<double> labelAnimation,
      double height, {
@ -131,7 +138,7 @@ class DraggableScrollbar extends StatefulWidget {
    }) {
      final scrollThumb = CustomPaint(
        key: scrollThumbKey,
-        foregroundPainter: ArrowCustomPainter(Colors.white),
+        foregroundPainter: ArrowCustomPainter(foregroundColor),
        child: Material(
          elevation: 4.0,
          color: backgroundColor,
@ -150,6 +157,7 @@ class DraggableScrollbar extends StatefulWidget {
      return buildScrollThumbAndLabel(
        scrollThumb: scrollThumb,
        backgroundColor: backgroundColor,
+        foregroundColor: foregroundColor,
        thumbAnimation: thumbAnimation,
        labelAnimation: labelAnimation,
        labelText: labelText,
@ -286,6 +294,7 @@ class DraggableScrollbarState extends State<DraggableScrollbar>
                    padding: widget.padding,
                    child: widget.scrollThumbBuilder(
                      widget.backgroundColor,
+                      widget.foregroundColor,
                      _thumbAnimation,
                      _labelAnimation,
                      widget.heightScrollThumb,
--- a/mobile/lib/modules/home/ui/asset_grid/group_divider_title.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/group_divider_title.dart
@ -74,9 +74,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.onBackground.withAlpha(100),
                  ),
          ),
        ],
--- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart
@ -222,9 +222,8 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {
      padding: const EdgeInsets.only(left: 12.0, top: 24.0),
      child: Text(
        title,
-        style: const TextStyle(
-          fontSize: 26,
-          fontWeight: FontWeight.w500,
+        style: context.textTheme.displayLarge?.copyWith(
+          color: context.colorScheme.onSurface,
        ),
      ),
    );
@ -243,7 +242,7 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {
              bottom: widget.margin,
              right: i + 1 == num ? 0.0 : widget.margin,
            ),
-            color: Colors.grey,
+            color: context.colorScheme.surfaceVariant,
          ),
      ],
    );
@ -328,8 +327,8 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {

    return Text(
      DateFormat.yMMMM().format(date),
-      style: const TextStyle(
-        color: Colors.white,
+      style: TextStyle(
+        color: context.colorScheme.onPrimary,
        fontWeight: FontWeight.bold,
      ),
    );
@ -372,7 +371,8 @@ class ImmichAssetGridViewState extends State<ImmichAssetGridView> {
            scrollStateListener: dragScrolling,
            itemPositionsListener: _itemPositionsListener,
            controller: _itemScrollController,
-            backgroundColor: context.themeData.hintColor,
+            backgroundColor: context.primaryColor,
+            foregroundColor: context.colorScheme.onPrimary,
            labelTextBuilder: _labelBuilder,
            labelConstraints: const BoxConstraints(maxHeight: 28),
            scrollbarAnimationDuration: const Duration(milliseconds: 300),
--- a/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
+++ b/mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
@ -43,9 +43,6 @@ class ThumbnailImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final assetContainerColor = context.isDarkTheme
-        ? Colors.blueGrey
-        : context.themeData.primaryColorLight;
    // 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;

@ -54,11 +51,13 @@ class ThumbnailImage extends StatelessWidget {
        return Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
-            color: assetContainerColor,
+            color: context.colorScheme.surfaceVariant,
          ),
          child: Icon(
            Icons.check_circle_rounded,
-            color: context.primaryColor,
+            color: onDeselect == null
+                ? context.primaryColor.withAlpha(120)
+                : context.primaryColor,
          ),
        );
      } else {
@ -132,9 +131,10 @@ class ThumbnailImage extends StatelessWidget {
    }

    Widget buildImage() {
-      final image = SizedBox(
+      final image = Container(
        width: 300,
        height: 300,
+        color: context.colorScheme.surfaceVariant,
        child: Hero(
          tag: isFromDto
              ? '${asset.remoteId}-$heroOffset'
@ -153,9 +153,9 @@ class ThumbnailImage extends StatelessWidget {
        decoration: BoxDecoration(
          border: Border.all(
            width: 0,
-            color: onDeselect == null ? Colors.grey : assetContainerColor,
+            color: context.colorScheme.surfaceVariant,
          ),
-          color: onDeselect == null ? Colors.grey : assetContainerColor,
+          color: context.colorScheme.surfaceVariant,
        ),
        child: ClipRRect(
          borderRadius: const BorderRadius.only(
@ -203,10 +203,8 @@ class ThumbnailImage extends StatelessWidget {
            decoration: BoxDecoration(
              border: multiselectEnabled && isSelected
                  ? Border.all(
-                      color: onDeselect == null
-                          ? Colors.grey
-                          : assetContainerColor,
-                      width: 8,
+                      color: context.colorScheme.surfaceVariant,
+                      width: 12,
                    )
                  : const Border(),
            ),
--- a/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
+++ b/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
@ -2,6 +2,7 @@ import 'package:easy_localization/easy_localization.dart';
 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/extensions/color_extensions.dart';
 import 'package:immich_mobile/modules/album/ui/add_to_album_sliverlist.dart';
 import 'package:immich_mobile/modules/home/models/selection_state.dart';
 import 'package:immich_mobile/modules/home/ui/delete_dialog.dart';
@ -128,9 +129,8 @@ class ControlBottomAppBar extends ConsumerWidget {
        ScrollController scrollController,
      ) {
        return Card(
-          color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[100],
-          surfaceTintColor: Colors.transparent,
-          elevation: 18.0,
+          elevation: 2,
+          color: context.colorScheme.surface.lighten(15),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(12),
--- a/mobile/lib/modules/login/ui/login_form.dart
+++ b/mobile/lib/modules/login/ui/login_form.dart
@ -306,7 +306,8 @@ class LoginForm extends HookConsumerWidget {
          children: [
            Text(
              sanitizeUrl(serverEndpointController.text),
-              style: context.textTheme.displaySmall,
+              style: context.textTheme.displaySmall
+                  ?.copyWith(color: context.primaryColor),
              textAlign: TextAlign.center,
            ),
            if (isPasswordLoginEnable.value) ...[
@ -616,7 +617,7 @@ class LoadingIcon extends StatelessWidget {
        height: 24,
        child: FittedBox(
          child: CircularProgressIndicator(
-            strokeWidth: 2,
+            strokeWidth: 5,
          ),
        ),
      ),
--- a/mobile/lib/modules/map/views/map_page.dart
+++ b/mobile/lib/modules/map/views/map_page.dart
@ -125,8 +125,11 @@ class MapPageState extends ConsumerState<MapPage> {
    final refetchMarkers = useState(true);
    final isLoading =
        ref.watch(mapStateNotifier.select((state) => state.isLoading));
+    final mapStyle =
+        ref.watch(mapStateNotifier.select((state) => state.mapStyle));
    final maxZoom = ref.read(mapStateNotifier.notifier).maxZoom;
    final zoomLevel = math.min(maxZoom, 14.0);
+    final themeData = isDarkTheme ? immichDarkTheme : immichLightTheme;

    if (refetchMarkers.value) {
      mapMarkerData.value = ref.watch(mapMarkersProvider).when(
@ -195,7 +198,7 @@ class MapPageState extends ConsumerState<MapPage> {
          showDialog(
            context: context,
            builder: (context) => Theme(
-              data: isDarkTheme ? immichDarkTheme : immichLightTheme,
+              data: themeData,
              child: LocationServiceDisabledDialog(),
            ),
          );
@ -209,7 +212,7 @@ class MapPageState extends ConsumerState<MapPage> {
          shouldRequestPermission = await showDialog(
            context: context,
            builder: (context) => Theme(
-              data: isDarkTheme ? immichDarkTheme : immichLightTheme,
+              data: themeData,
              child: LocationPermissionDisabledDialog(),
            ),
          );
@ -426,7 +429,7 @@ class MapPageState extends ConsumerState<MapPage> {
      ),
      child: Theme(
        // Override app theme based on map theme
-        data: isDarkTheme ? immichDarkTheme : immichLightTheme,
+        data: themeData,
        child: Scaffold(
          appBar: MapAppBar(
            isDarkTheme: isDarkTheme,
@ -439,7 +442,7 @@ class MapPageState extends ConsumerState<MapPage> {
          extendBodyBehindAppBar: true,
          body: Stack(
            children: [
-              if (!isLoading)
+              if (!isLoading || mapStyle != null)
                FlutterMap(
                  mapController: mapController,
                  options: MapOptions(
@ -464,7 +467,7 @@ class MapPageState extends ConsumerState<MapPage> {
                    markerLayer,
                  ],
                ),
-              if (!isLoading)
+              if (!isLoading || mapStyle != null)
                MapPageBottomSheet(
                  mapPageEventStream: mapPageEventSC.stream,
                  bottomSheetEventSC: bottomSheetEventSC,
@ -473,10 +476,13 @@ class MapPageState extends ConsumerState<MapPage> {
                  isDarkTheme: isDarkTheme,
                ),
              if (showLoadingIndicator.value || isLoading)
-                Positioned(
-                  top: context.height * 0.35,
-                  left: context.width * 0.425,
-                  child: const ImmichLoadingIndicator(),
+                IgnorePointer(
+                  child: Container(
+                    width: double.infinity,
+                    height: double.infinity,
+                    color: context.colorScheme.surface.withAlpha(70),
+                    child: const Center(child: ImmichLoadingIndicator()),
+                  ),
                ),
            ],
          ),
--- a/mobile/lib/modules/search/services/person.service.g.dart
+++ b/mobile/lib/modules/search/services/person.service.g.dart
@ -6,7 +6,7 @@ part of 'person.service.dart';
 // RiverpodGenerator
 // **************************************************************************

-String _$personServiceHash() => r'3fc3dcf4603c7b55c0deae65f39f6c212eea492b';
+String _$personServiceHash() => r'cde0a9c029d16ddde2adcd58ae8c863bf8cc1fed';

 /// See also [personService].
@ProviderFor(personService)
--- a/mobile/lib/modules/search/ui/curated_people_row.dart
+++ b/mobile/lib/modules/search/ui/curated_people_row.dart
@ -31,8 +31,8 @@ class CuratedPeopleRow extends StatelessWidget {
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: SizedBox(
-            width: imageSize,
-            height: imageSize,
+            width: 120,
+            height: 120,
            child: ThumbnailWithInfo(
              textInfo: '',
              onTap: () {},
@ -69,6 +69,7 @@ class CuratedPeopleRow extends StatelessWidget {
                      elevation: 3,
                      child: CircleAvatar(
                        maxRadius: imageSize / 2,
+                        backgroundColor: context.colorScheme.surfaceVariant,
                        backgroundImage: NetworkImage(
                          getFaceThumbnailUrl(person.id),
                          headers: headers,
--- a/mobile/lib/modules/search/ui/curated_places_row.dart
+++ b/mobile/lib/modules/search/ui/curated_places_row.dart
@ -52,13 +52,13 @@ class CuratedPlacesRow extends CuratedRow {
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
-                    color: Colors.black,
+                    color: context.colorScheme.shadow,
                    gradient: LinearGradient(
                      begin: FractionalOffset.topCenter,
                      end: FractionalOffset.bottomCenter,
                      colors: [
-                        Colors.blueGrey.withOpacity(0.0),
-                        Colors.black.withOpacity(0.4),
+                        context.colorScheme.shadow.withOpacity(0.1),
+                        context.colorScheme.shadow.withOpacity(0.2),
                      ],
                      stops: const [0.0, 0.4],
                    ),
--- a/mobile/lib/modules/search/ui/thumbnail_with_info.dart
+++ b/mobile/lib/modules/search/ui/thumbnail_with_info.dart
@ -23,8 +23,6 @@ class ThumbnailWithInfo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    var textAndIconColor =
-        context.isDarkTheme ? Colors.grey[100] : Colors.grey[700];
    return GestureDetector(
      onTap: () {
        onTap();
@ -35,7 +33,7 @@ class ThumbnailWithInfo extends StatelessWidget {
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(borderRadius),
-              color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[100],
+              color: context.colorScheme.surfaceVariant,
            ),
            child: imageUrl != null
                ? ClipRRect(
@ -44,6 +42,16 @@ class ThumbnailWithInfo extends StatelessWidget {
                      width: double.infinity,
                      height: double.infinity,
                      fit: BoxFit.cover,
+                      placeholder: (context, url) {
+                        return SizedBox.square(
+                          dimension: 250,
+                          child: DecoratedBox(
+                            decoration: BoxDecoration(
+                              color: context.colorScheme.surfaceVariant,
+                            ),
+                          ),
+                        );
+                      },
                      imageUrl: imageUrl!,
                      httpHeaders: {
                        "Authorization":
@ -56,22 +64,22 @@ class ThumbnailWithInfo extends StatelessWidget {
                : Center(
                    child: Icon(
                      noImageIcon ?? Icons.not_listed_location,
-                      color: textAndIconColor,
+                      color: context.primaryColor,
                    ),
                  ),
          ),
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(borderRadius),
-              color: Colors.white,
+              color: context.colorScheme.inverseSurface,
              gradient: LinearGradient(
                begin: FractionalOffset.topCenter,
                end: FractionalOffset.bottomCenter,
                colors: [
-                  Colors.grey.withOpacity(0.0),
+                  context.colorScheme.shadow.withOpacity(0),
                  textInfo == ''
-                      ? Colors.black.withOpacity(0.1)
-                      : Colors.black.withOpacity(0.5),
+                      ? context.colorScheme.shadow.withOpacity(0.1)
+                      : context.colorScheme.shadow.withOpacity(0.2),
                ],
                stops: const [0.0, 1.0],
              ),
--- a/mobile/lib/modules/settings/providers/app_settings.provider.g.dart
+++ b/mobile/lib/modules/settings/providers/app_settings.provider.g.dart
@ -7,7 +7,7 @@ part of 'app_settings.provider.dart';
 // **************************************************************************

 String _$appSettingsServiceHash() =>
-    r'957a65af6967701112f3076b507f9738fec4b7be';
+    r'45ea609a91d250290431a7a08a14d16b37c7515d';

 /// See also [appSettingsService].
@ProviderFor(appSettingsService)
--- a/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
+++ b/mobile/lib/modules/settings/ui/advanced_settings/advanced_settings.dart
@ -81,7 +81,6 @@ class AdvancedSettings extends HookConsumerWidget {
            min: 1.0,
            divisions: 7,
            label: logLevel,
-            activeColor: context.primaryColor,
          ),
        ),
        SettingsSwitchListTile(
--- a/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_layout_settings.dart
+++ b/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_layout_settings.dart
@ -51,7 +51,6 @@ class LayoutSettings extends HookConsumerWidget {
    return Column(
      children: [
        SwitchListTile.adaptive(
-          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_dynamic_layout_title",
            style: context.textTheme.labelLarge,
@ -73,7 +72,6 @@ class LayoutSettings extends HookConsumerWidget {
          ).tr(),
        ),
        RadioListTile(
-          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_group_by_month_day",
            style: context.textTheme.labelLarge,
@ -84,7 +82,6 @@ class LayoutSettings extends HookConsumerWidget {
          controlAffinity: ListTileControlAffinity.trailing,
        ),
        RadioListTile(
-          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_group_by_month",
            style: context.textTheme.labelLarge,
@ -95,7 +92,6 @@ class LayoutSettings extends HookConsumerWidget {
          controlAffinity: ListTileControlAffinity.trailing,
        ),
        RadioListTile(
-          activeColor: context.primaryColor,
          title: Text(
            "asset_list_layout_settings_group_automatically",
            style: context.textTheme.labelLarge,
--- a/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_storage_indicator.dart
+++ b/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_storage_indicator.dart
@ -34,7 +34,6 @@ class StorageIndicator extends HookConsumerWidget {
    );

    return SwitchListTile.adaptive(
-      activeColor: context.primaryColor,
      title: Text(
        "theme_setting_asset_list_storage_indicator_title",
        style: context.textTheme.labelLarge,
--- a/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_tiles_per_row.dart
+++ b/mobile/lib/modules/settings/ui/asset_list_settings/asset_list_tiles_per_row.dart
@ -49,7 +49,6 @@ class TilesPerRow extends HookConsumerWidget {
          max: 6,
          divisions: 4,
          label: "${itemsValue.value.toInt()}",
-          activeColor: context.primaryColor,
        ),
      ],
    );
--- a/mobile/lib/modules/settings/ui/notification_setting/notification_setting.dart
+++ b/mobile/lib/modules/settings/ui/notification_setting/notification_setting.dart
@ -143,7 +143,6 @@ class NotificationSetting extends HookConsumerWidget {
            max: 5.0,
            divisions: 5,
            label: formattedValue,
-            activeColor: context.primaryColor,
          ),
        ),
      ],
--- a/mobile/lib/modules/settings/ui/settings_switch_list_tile.dart
+++ b/mobile/lib/modules/settings/ui/settings_switch_list_tile.dart
@ -35,17 +35,21 @@ class SettingsSwitchListTile extends StatelessWidget {
          onChanged!(value);
        }
      },
-      activeColor:
-          enabled ? context.primaryColor : context.themeData.disabledColor,
+      activeColor: enabled ? null : context.themeData.disabledColor,
      dense: true,
      title: Text(
        title,
-        style: context.textTheme.titleSmall,
+        style: context.textTheme.labelLarge?.copyWith(
+          fontWeight: FontWeight.bold,
+          color: enabled ? null : context.themeData.disabledColor,
+        ),
      ),
      subtitle: subtitle != null
          ? Text(
              subtitle!,
-              style: context.textTheme.bodyMedium,
+              style: TextStyle(
+                color: enabled ? null : context.themeData.disabledColor,
+              ),
            )
          : null,
    );
--- a/mobile/lib/modules/settings/ui/theme_setting/theme_setting.dart
+++ b/mobile/lib/modules/settings/ui/theme_setting/theme_setting.dart
@ -5,7 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
 import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
 import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
-import 'package:immich_mobile/utils/immich_app_theme.dart';
+import 'package:immich_mobile/shared/providers/theme.provider.dart';

 class ThemeSetting extends HookConsumerWidget {
  const ThemeSetting({
@ -35,7 +35,6 @@ class ThemeSetting extends HookConsumerWidget {
      ).tr(),
      children: [
        SwitchListTile.adaptive(
-          activeColor: context.primaryColor,
          title: Text(
            'theme_setting_system_theme_switch',
            style: context.textTheme.labelLarge
@ -48,20 +47,26 @@ class ThemeSetting extends HookConsumerWidget {

            if (isSystem) {
              currentTheme.value = ThemeMode.system;
-              ref.watch(immichThemeProvider.notifier).state = ThemeMode.system;
+              ref
+                  .watch(immichThemeProvider.notifier)
+                  .updateTheme(ThemeMode.system);
              ref
                  .watch(appSettingsServiceProvider)
                  .setSetting(AppSettingsEnum.themeMode, "system");
            } else {
              if (currentSystemBrightness == Brightness.light) {
                currentTheme.value = ThemeMode.light;
-                ref.watch(immichThemeProvider.notifier).state = ThemeMode.light;
+                ref
+                    .watch(immichThemeProvider.notifier)
+                    .updateTheme(ThemeMode.light);
                ref
                    .watch(appSettingsServiceProvider)
                    .setSetting(AppSettingsEnum.themeMode, "light");
              } else if (currentSystemBrightness == Brightness.dark) {
                currentTheme.value = ThemeMode.dark;
-                ref.watch(immichThemeProvider.notifier).state = ThemeMode.dark;
+                ref
+                    .watch(immichThemeProvider.notifier)
+                    .updateTheme(ThemeMode.dark);
                ref
                    .watch(appSettingsServiceProvider)
                    .setSetting(AppSettingsEnum.themeMode, "dark");
@ -71,7 +76,6 @@ class ThemeSetting extends HookConsumerWidget {
        ),
        if (currentTheme.value != ThemeMode.system)
          SwitchListTile.adaptive(
-            activeColor: context.primaryColor,
            title: Text(
              'theme_setting_dark_mode_switch',
              style: context.textTheme.labelLarge
@ -80,12 +84,16 @@ class ThemeSetting extends HookConsumerWidget {
            value: ref.watch(immichThemeProvider) == ThemeMode.dark,
            onChanged: (bool isDark) {
              if (isDark) {
-                ref.watch(immichThemeProvider.notifier).state = ThemeMode.dark;
+                ref
+                    .watch(immichThemeProvider.notifier)
+                    .updateTheme(ThemeMode.dark);
                ref
                    .watch(appSettingsServiceProvider)
                    .setSetting(AppSettingsEnum.themeMode, "dark");
              } else {
-                ref.watch(immichThemeProvider.notifier).state = ThemeMode.light;
+                ref
+                    .watch(immichThemeProvider.notifier)
+                    .updateTheme(ThemeMode.light);
                ref
                    .watch(appSettingsServiceProvider)
                    .setSetting(AppSettingsEnum.themeMode, "light");
--- a/mobile/lib/routing/tab_navigation_observer.dart
+++ b/mobile/lib/routing/tab_navigation_observer.dart
@ -21,14 +21,6 @@ class TabNavigationObserver extends AutoRouterObserver {
    required this.ref,
  });

-  @override
-  void didInitTabRoute(TabPageRoute route, TabPageRoute? previousRoute) {
-    // Perform tasks on first navigation to SearchRoute
-    if (route.name == 'SearchRoute') {
-      // ref.refresh(getCuratedLocationProvider);
-    }
-  }
-
  @override
  Future<void> didChangeTabRoute(
    TabPageRoute route,
--- a/mobile/lib/shared/providers/api.provider.g.dart
+++ b/mobile/lib/shared/providers/api.provider.g.dart
@ -6,7 +6,7 @@ part of 'api.provider.dart';
 // RiverpodGenerator
 // **************************************************************************

-String _$apiServiceHash() => r'03cbd33147a7058d56175e532ac47e1aa4858c6d';
+String _$apiServiceHash() => r'5b8beddb448316bdae5e3963ff77601653715729';

 /// See also [apiService].
@ProviderFor(apiService)
--- a/mobile/lib/shared/providers/immich_loading_overlay.provider.dart
+++ b/mobile/lib/shared/providers/immich_loading_overlay.provider.dart
@ -0,0 +1,14 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class ImmichLoadingOverlayNotifier extends StateNotifier<bool> {
+  ImmichLoadingOverlayNotifier() : super(false);
+
+  void show() => state = true;
+
+  void hide() => state = false;
+}
+
+final immichLoadingOverlayController =
+    StateNotifierProvider.autoDispose<ImmichLoadingOverlayNotifier, bool>(
+  (_) => ImmichLoadingOverlayNotifier(),
+);
--- a/mobile/lib/shared/providers/theme.provider.dart
+++ b/mobile/lib/shared/providers/theme.provider.dart
@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
+import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'theme.provider.g.dart';
+
+@Riverpod(keepAlive: true)
+class ImmichTheme extends _$ImmichTheme {
+  @override
+  ThemeMode build() {
+    final themeMode = ref
+        .watch(appSettingsServiceProvider)
+        .getSetting(AppSettingsEnum.themeMode);
+
+    switch (themeMode) {
+      case "light":
+        return ThemeMode.light;
+      case "dark":
+        return ThemeMode.dark;
+      default:
+        return ThemeMode.system;
+    }
+  }
+
+  void updateTheme(ThemeMode newMode) => state = newMode;
+}
--- a/mobile/lib/shared/providers/theme.provider.g.dart
+++ b/mobile/lib/shared/providers/theme.provider.g.dart
@ -0,0 +1,24 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'theme.provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$immichThemeHash() => r'22952207d5d5e6289a8244589e703c816501d6e3';
+
+/// See also [ImmichTheme].
+@ProviderFor(ImmichTheme)
+final immichThemeProvider = NotifierProvider<ImmichTheme, ThemeMode>.internal(
+  ImmichTheme.new,
+  name: r'immichThemeProvider',
+  debugGetCreateSourceHash:
+      const bool.fromEnvironment('dart.vm.product') ? null : _$immichThemeHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$ImmichTheme = Notifier<ThemeMode>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member
--- a/mobile/lib/shared/ui/app_bar_dialog/app_bar_dialog.dart
+++ b/mobile/lib/shared/ui/app_bar_dialog/app_bar_dialog.dart
@ -135,11 +135,7 @@ class ImmichAppBarDialog extends HookConsumerWidget {
        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 3),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 4),
-          decoration: BoxDecoration(
-            color: context.isDarkTheme
-                ? context.scaffoldBackgroundColor
-                : const Color.fromARGB(255, 225, 229, 240),
-          ),
+          decoration: BoxDecoration(color: context.colorScheme.surface),
          child: ListTile(
            minLeadingWidth: 50,
            leading: Icon(
@ -163,7 +159,8 @@ class ImmichAppBarDialog extends HookConsumerWidget {
                    child: LinearProgressIndicator(
                      minHeight: 5.0,
                      value: backupState.serverInfo.diskUsagePercentage / 100.0,
-                      backgroundColor: Colors.grey,
+                      backgroundColor:
+                          context.colorScheme.onSurface.withAlpha(50),
                      color: theme.primaryColor,
                    ),
                  ),
--- a/mobile/lib/shared/ui/app_bar_dialog/app_bar_profile_info.dart
+++ b/mobile/lib/shared/ui/app_bar_dialog/app_bar_profile_info.dart
@ -77,9 +77,7 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
-          color: context.isDarkTheme
-              ? context.scaffoldBackgroundColor
-              : const Color.fromARGB(255, 225, 229, 240),
+          color: context.colorScheme.surface,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
@ -97,9 +95,7 @@ class AppBarProfileInfoBox extends HookConsumerWidget {
                  bottom: -5,
                  right: -8,
                  child: Material(
-                    color: context.isDarkTheme
-                        ? Colors.blueGrey[800]
-                        : Colors.white,
+                    color: context.colorScheme.primaryContainer,
                    elevation: 3,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50.0),
--- a/mobile/lib/shared/ui/app_bar_dialog/app_bar_server_info.dart
+++ b/mobile/lib/shared/ui/app_bar_dialog/app_bar_server_info.dart
@ -42,9 +42,7 @@ class AppBarServerInfo extends HookConsumerWidget {
      padding: const EdgeInsets.only(left: 10.0, right: 10.0, bottom: 10.0),
      child: Container(
        decoration: BoxDecoration(
-          color: context.isDarkTheme
-              ? context.scaffoldBackgroundColor
-              : const Color.fromARGB(255, 225, 229, 240),
+          color: context.colorScheme.surface,
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(10),
            bottomRight: Radius.circular(10),
@ -186,8 +184,7 @@ class AppBarServerInfo extends HookConsumerWidget {
                          borderRadius: BorderRadius.circular(10),
                        ),
                        textStyle: TextStyle(
-                          color:
-                              context.isDarkTheme ? Colors.black : Colors.white,
+                          color: context.colorScheme.onPrimary,
                          fontWeight: FontWeight.bold,
                        ),
                        message: getServerUrl() ?? '--',
--- a/mobile/lib/shared/ui/confirm_dialog.dart
+++ b/mobile/lib/shared/ui/confirm_dialog.dart
@ -44,7 +44,7 @@ class ConfirmDialog extends ConsumerWidget {
          child: Text(
            ok,
            style: TextStyle(
-              color: Colors.red[400],
+              color: context.colorScheme.error,
              fontWeight: FontWeight.bold,
            ),
          ).tr(),
--- a/mobile/lib/shared/ui/drag_sheet.dart
+++ b/mobile/lib/shared/ui/drag_sheet.dart
@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';

 class CustomDraggingHandle extends StatelessWidget {
  const CustomDraggingHandle({super.key});
@ -9,7 +10,7 @@ class CustomDraggingHandle extends StatelessWidget {
      height: 5,
      width: 30,
      decoration: BoxDecoration(
-        color: Colors.grey[500],
+        color: context.themeData.dividerColor,
        borderRadius: BorderRadius.circular(16),
      ),
    );
--- a/mobile/lib/shared/ui/immich_app_bar.dart
+++ b/mobile/lib/shared/ui/immich_app_bar.dart
@ -25,7 +25,6 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
        backupState.backgroundBackup || backupState.autoBackup;
    final ServerInfo serverInfoState = ref.watch(serverInfoProvider);
    final user = Store.tryGet(StoreKey.currentUser);
-    final isDarkTheme = context.isDarkTheme;
    const widgetSize = 30.0;

    buildProfileIndicator() {
@ -42,9 +41,9 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
              color: Colors.black,
              borderRadius: BorderRadius.circular(widgetSize / 2),
            ),
-            child: const Icon(
+            child: Icon(
              Icons.info,
-              color: Color.fromARGB(255, 243, 188, 106),
+              color: context.orangeColor,
              size: widgetSize / 2,
            ),
          ),
@ -68,9 +67,7 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
      );
    }

-    getBackupBadgeIcon() {
-      final iconColor = isDarkTheme ? Colors.white : Colors.black;
-
+    Widget? getBackupBadgeIcon() {
      if (isEnableAutoBackup) {
        if (backupState.backupProgress == BackUpProgressEnum.inProgress) {
          return Container(
@ -78,7 +75,7 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
            child: CircularProgressIndicator(
              strokeWidth: 2,
              strokeCap: StrokeCap.round,
-              valueColor: AlwaysStoppedAnimation<Color>(iconColor),
+              color: context.colorScheme.onSurfaceVariant,
            ),
          );
        } else if (backupState.backupProgress !=
@ -87,7 +84,7 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
          return Icon(
            Icons.check_outlined,
            size: 9,
-            color: iconColor,
+            color: context.colorScheme.onSurfaceVariant,
          );
        }
      }
@ -96,14 +93,14 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
        return Icon(
          Icons.cloud_off_rounded,
          size: 9,
-          color: iconColor,
+          color: context.colorScheme.onSurfaceVariant,
        );
      }
+      return null;
    }

    buildBackupIndicator() {
      final indicatorIcon = getBackupBadgeIcon();
-      final badgeBackground = isDarkTheme ? Colors.blueGrey[800] : Colors.white;

      return InkWell(
        onTap: () => context.autoPush(const BackupControllerRoute()),
@ -113,11 +110,11 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
            width: widgetSize / 2,
            height: widgetSize / 2,
            decoration: BoxDecoration(
-              color: badgeBackground,
              border: Border.all(
-                color: isDarkTheme ? Colors.black : Colors.grey,
+                color: context.colorScheme.surface,
              ),
              borderRadius: BorderRadius.circular(widgetSize / 2),
+              color: context.colorScheme.surfaceVariant,
            ),
            child: indicatorIcon,
          ),
@ -125,16 +122,16 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
          alignment: Alignment.bottomRight,
          isLabelVisible: indicatorIcon != null,
          offset: const Offset(2, 2),
-          child: Icon(
+          child: const Icon(
            Icons.backup_rounded,
            size: widgetSize,
-            color: context.primaryColor,
          ),
        ),
      );
    }

    return AppBar(
+      elevation: 0.0,
      backgroundColor: context.themeData.appBarTheme.backgroundColor,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
@ -157,12 +154,13 @@ class ImmichAppBar extends ConsumerWidget implements PreferredSizeWidget {
              ),
              Container(
                margin: const EdgeInsets.only(left: 10),
-                child: const Text(
+                child: Text(
                  'IMMICH',
                  style: TextStyle(
                    fontFamily: 'SnowburstOne',
                    fontWeight: FontWeight.bold,
                    fontSize: 24,
+                    color: context.primaryColor,
                  ),
                ),
              ),
--- a/mobile/lib/shared/ui/immich_image.dart
+++ b/mobile/lib/shared/ui/immich_image.dart
@ -33,8 +33,8 @@ class ImmichImage extends StatelessWidget {
  Widget build(BuildContext context) {
    if (this.asset == null) {
      return Container(
-        decoration: const BoxDecoration(
-          color: Colors.grey,
+        decoration: BoxDecoration(
+          color: context.colorScheme.surfaceVariant,
        ),
        child: SizedBox(
          width: width,
@ -61,10 +61,12 @@ class ImmichImage extends StatelessWidget {
          return Stack(
            children: [
              if (useGrayBoxPlaceholder)
-                const SizedBox.square(
+                SizedBox.square(
                  dimension: 250,
                  child: DecoratedBox(
-                    decoration: BoxDecoration(color: Colors.grey),
+                    decoration: BoxDecoration(
+                      color: context.colorScheme.surfaceVariant,
+                    ),
                  ),
                ),
              if (useProgressIndicator)
@ -110,10 +112,12 @@ class ImmichImage extends StatelessWidget {
        return Stack(
          children: [
            if (useGrayBoxPlaceholder)
-              const SizedBox.square(
+              SizedBox.square(
                dimension: 250,
                child: DecoratedBox(
-                  decoration: BoxDecoration(color: Colors.grey),
+                  decoration: BoxDecoration(
+                    color: context.colorScheme.surfaceVariant,
+                  ),
                ),
              ),
            if (useProgressIndicator)
--- a/mobile/lib/shared/ui/immich_loading_indicator.dart
+++ b/mobile/lib/shared/ui/immich_loading_indicator.dart
@ -15,12 +15,12 @@ class ImmichLoadingIndicator extends StatelessWidget {
      height: 60,
      width: 60,
      decoration: BoxDecoration(
-        color: context.primaryColor.withAlpha(200),
+        color: context.primaryColor,
        borderRadius: BorderRadius.circular(borderRadius ?? 10),
      ),
      padding: const EdgeInsets.all(15),
-      child: const CircularProgressIndicator(
-        color: Colors.white,
+      child: CircularProgressIndicator(
+        color: context.colorScheme.onPrimary,
        strokeWidth: 3,
      ),
    );
--- a/mobile/lib/shared/ui/immich_toast.dart
+++ b/mobile/lib/shared/ui/immich_toast.dart
@ -9,7 +9,7 @@ class ImmichToast {
    required BuildContext context,
    required String msg,
    ToastType toastType = ToastType.info,
-    ToastGravity gravity = ToastGravity.TOP,
+    ToastGravity gravity = ToastGravity.BOTTOM,
    int durationInSecond = 3,
  }) {
    final fToast = FToast();
@ -18,7 +18,7 @@ class ImmichToast {
    Color getColor(ToastType type, BuildContext context) {
      switch (type) {
        case ToastType.info:
-          return context.primaryColor;
+          return const Color.fromARGB(255, 48, 111, 220);
        case ToastType.success:
          return const Color.fromARGB(255, 78, 140, 124);
        case ToastType.error:
@ -26,41 +26,39 @@ class ImmichToast {
      }
    }

-    Icon getIcon(ToastType type) {
+    IconData getIcon(ToastType type) {
      switch (type) {
        case ToastType.info:
-          return Icon(
-            Icons.info_outline_rounded,
-            color: context.primaryColor,
-          );
+          return Icons.info_outline_rounded;
        case ToastType.success:
-          return const Icon(
-            Icons.check_circle_rounded,
-            color: Color.fromARGB(255, 78, 140, 124),
-          );
+          return Icons.check_circle_outline_rounded;
        case ToastType.error:
-          return const Icon(
-            Icons.error_outline_rounded,
-            color: Color.fromARGB(255, 240, 162, 156),
-          );
+          return Icons.report_problem_outlined;
      }
    }

    fToast.showToast(
      child: Container(
-        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
+        padding: const EdgeInsets.symmetric(vertical: 12.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
-          color: context.isDarkTheme ? Colors.grey[900] : Colors.grey[50],
+          color: context.colorScheme.inverseSurface,
          border: Border.all(
-            color: Colors.black12,
+            color: context.colorScheme.inverseSurface,
            width: 1,
          ),
        ),
        child: Row(
-          mainAxisSize: MainAxisSize.min,
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.start,
          children: [
-            getIcon(toastType),
+            Padding(
+              padding: const EdgeInsets.only(left: 15, right: 5),
+              child: Icon(
+                getIcon(toastType),
+                color: getColor(toastType, context),
+              ),
+            ),
            const SizedBox(
              width: 12.0,
            ),
@ -68,8 +66,7 @@ class ImmichToast {
              child: Text(
                msg,
                style: TextStyle(
-                  color: getColor(toastType, context),
-                  fontWeight: FontWeight.bold,
+                  color: context.colorScheme.onInverseSurface,
                  fontSize: 15,
                ),
              ),
--- a/mobile/lib/shared/ui/photo_view/src/photo_view_default_widgets.dart
+++ b/mobile/lib/shared/ui/photo_view/src/photo_view_default_widgets.dart
@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';

 class PhotoViewDefaultError extends StatelessWidget {
  const PhotoViewDefaultError({Key? key, required this.decoration})
@ -13,7 +14,7 @@ class PhotoViewDefaultError extends StatelessWidget {
      child: Center(
        child: Icon(
          Icons.broken_image,
-          color: Colors.grey[400],
+          color: context.primaryColor,
          size: 40.0,
        ),
      ),
--- a/mobile/lib/shared/ui/user_circle_avatar.dart
+++ b/mobile/lib/shared/ui/user_circle_avatar.dart
@ -3,6 +3,7 @@ import 'dart:math';
 import 'package:cached_network_image/cached_network_image.dart';
 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/shared/models/store.dart';
 import 'package:immich_mobile/shared/models/user.dart';
 import 'package:immich_mobile/shared/ui/transparent_image.dart';
@ -22,7 +23,6 @@ class UserCircleAvatar extends ConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    bool isDarkTheme = Theme.of(context).brightness == Brightness.dark;
    final profileImageUrl =
        '${Store.get(StoreKey.serverEndpoint)}/user/profile-image/${user.id}?d=${Random().nextInt(1024)}';

@ -30,10 +30,8 @@ class UserCircleAvatar extends ConsumerWidget {
      user.name[0].toUpperCase(),
      style: TextStyle(
        fontWeight: FontWeight.bold,
-        fontSize: 12,
-        color: isDarkTheme && user.avatarColor == AvatarColorEnum.primary
-            ? Colors.black
-            : Colors.white,
+        fontSize: 16,
+        color: context.colorScheme.surface,
      ),
    );
    return CircleAvatar(
--- a/mobile/lib/shared/views/app_log_detail_page.dart
+++ b/mobile/lib/shared/views/app_log_detail_page.dart
@ -11,8 +11,6 @@ class AppLogDetailPage extends HookConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    var isDarkTheme = context.isDarkTheme;
-
    buildStackMessage(String stackTrace) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
@ -60,7 +58,7 @@ class AppLogDetailPage extends HookConsumerWidget {
            ),
            Container(
              decoration: BoxDecoration(
-                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                color: context.colorScheme.surfaceVariant,
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Padding(
@ -126,7 +124,7 @@ class AppLogDetailPage extends HookConsumerWidget {
            ),
            Container(
              decoration: BoxDecoration(
-                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                color: context.colorScheme.surfaceVariant,
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Padding(
@ -165,7 +163,7 @@ class AppLogDetailPage extends HookConsumerWidget {
            ),
            Container(
              decoration: BoxDecoration(
-                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                color: context.colorScheme.surfaceVariant,
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Padding(
--- a/mobile/lib/shared/views/app_log_page.dart
+++ b/mobile/lib/shared/views/app_log_page.dart
@ -16,7 +16,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(
@ -39,12 +38,13 @@ class AppLogPage extends HookConsumerWidget {
        case LogLevel.INFO:
          return colorStatusIndicator(context.primaryColor);
        case LogLevel.SEVERE:
-          return colorStatusIndicator(Colors.redAccent);
-
+          return colorStatusIndicator(context.redColor);
        case LogLevel.WARNING:
-          return colorStatusIndicator(Colors.orangeAccent);
+          return colorStatusIndicator(context.orangeColor);
        default:
-          return colorStatusIndicator(Colors.grey);
+          return colorStatusIndicator(
+            context.colorScheme.onSurfaceVariant.withAlpha(150),
+          );
      }
    }

@ -53,15 +53,11 @@ 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 context.redColor.withAlpha(50);
        case LogLevel.WARNING:
-          return isDarkTheme
-              ? Colors.orangeAccent.withOpacity(0.25)
-              : Colors.orangeAccent.withOpacity(0.075);
+          return context.orangeColor.withAlpha(50);
        default:
-          return context.primaryColor.withOpacity(0.1);
+          return context.primaryColor.withAlpha(50);
      }
    }

@ -116,7 +112,7 @@ class AppLogPage extends HookConsumerWidget {
        separatorBuilder: (context, index) {
          return Divider(
            height: 0,
-            color: isDarkTheme ? Colors.white70 : Colors.grey[600],
+            color: context.themeData.dividerColor,
          );
        },
        itemCount: logMessages.value.length,
@ -139,7 +135,7 @@ class AppLogPage extends HookConsumerWidget {
                  TextSpan(
                    text: "#$index ",
                    style: TextStyle(
-                      color: isDarkTheme ? Colors.white70 : Colors.grey[600],
+                      color: context.themeData.dividerColor,
                      fontSize: 14.0,
                      fontWeight: FontWeight.bold,
                    ),
@ -158,7 +154,7 @@ class AppLogPage extends HookConsumerWidget {
              "[${logMessage.context1}] Logged on ${DateFormat("HH:mm:ss.SSS").format(logMessage.createdAt)}",
              style: TextStyle(
                fontSize: 12.0,
-                color: Colors.grey[600],
+                color: context.themeData.hintColor,
              ),
            ),
            leading: buildLeadingIcon(logMessage.level),
--- a/mobile/lib/shared/views/immich_loading_overlay.dart
+++ b/mobile/lib/shared/views/immich_loading_overlay.dart
@ -7,8 +7,9 @@ final _loadingEntry = OverlayEntry(
  builder: (context) => SizedBox.square(
    dimension: double.infinity,
    child: DecoratedBox(
-      decoration:
-          BoxDecoration(color: context.colorScheme.surface.withAlpha(200)),
+      decoration: BoxDecoration(
+        color: context.colorScheme.surface.withAlpha(70),
+      ),
      child: const Center(child: ImmichLoadingIndicator()),
    ),
  ),
--- a/mobile/lib/shared/views/splash_screen.dart
+++ b/mobile/lib/shared/views/splash_screen.dart
@ -92,8 +92,11 @@ class SplashScreenPage extends HookConsumerWidget {
      [],
    );

-    return const Scaffold(
-      body: Center(
+    return Scaffold(
+      appBar: AppBar(
+        elevation: 0.0,
+      ),
+      body: const Center(
        child: Image(
          image: AssetImage('assets/immich-logo-no-outline.png'),
          width: 80,
--- a/mobile/lib/shared/views/tab_controller_page.dart
+++ b/mobile/lib/shared/views/tab_controller_page.dart
@ -25,7 +25,7 @@ class TabControllerPage extends HookConsumerWidget {
        children: [
          icon,
          Positioned(
-            right: -14,
+            right: -16,
            child: SizedBox(
              height: 12,
              width: 12,
@ -115,9 +115,8 @@ class TabControllerPage extends HookConsumerWidget {
              Icons.photo_library_outlined,
            ),
            selectedIcon: buildIcon(
-              Icon(
+              const Icon(
                Icons.photo_library,
-                color: context.primaryColor,
              ),
            ),
          ),
@ -126,9 +125,8 @@ class TabControllerPage extends HookConsumerWidget {
            icon: const Icon(
              Icons.search_rounded,
            ),
-            selectedIcon: Icon(
+            selectedIcon: const Icon(
              Icons.search,
-              color: context.primaryColor,
            ),
          ),
          NavigationDestination(
@ -136,9 +134,8 @@ class TabControllerPage extends HookConsumerWidget {
            icon: const Icon(
              Icons.group_outlined,
            ),
-            selectedIcon: Icon(
+            selectedIcon: const Icon(
              Icons.group,
-              color: context.primaryColor,
            ),
          ),
          NavigationDestination(
@ -147,9 +144,8 @@ class TabControllerPage extends HookConsumerWidget {
              Icons.photo_album_outlined,
            ),
            selectedIcon: buildIcon(
-              Icon(
+              const Icon(
                Icons.photo_album_rounded,
-                color: context.primaryColor,
              ),
            ),
          ),
--- a/mobile/lib/utils/immich_app_theme.dart
+++ b/mobile/lib/utils/immich_app_theme.dart
@ -1,278 +1,177 @@
 import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:immich_mobile/constants/immich_colors.dart';
-import 'package:immich_mobile/modules/settings/providers/app_settings.provider.dart';
-import 'package:immich_mobile/modules/settings/services/app_settings.service.dart';

-final immichThemeProvider = StateProvider<ThemeMode>((ref) {
-  var themeMode = ref
-      .watch(appSettingsServiceProvider)
-      .getSetting(AppSettingsEnum.themeMode);
-
-  debugPrint("Current themeMode $themeMode");
-
-  if (themeMode == "light") {
-    return ThemeMode.light;
-  } else if (themeMode == "dark") {
-    return ThemeMode.dark;
-  } else {
-    return ThemeMode.system;
-  }
-});
-
-ThemeData base = ThemeData(
-  chipTheme: const ChipThemeData(
-    side: BorderSide.none,
-  ),
-  sliderTheme: const SliderThemeData(
-    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
-    trackHeight: 2.0,
-  ),
-);
-
-ThemeData immichLightTheme = ThemeData(
-  useMaterial3: true,
+ColorScheme _lightColorScheme = const ColorScheme(
  brightness: Brightness.light,
-  primarySwatch: Colors.indigo,
-  primaryColor: Colors.indigo,
-  hintColor: Colors.indigo,
-  focusColor: Colors.indigo,
-  splashColor: Colors.indigo.withOpacity(0.15),
-  fontFamily: 'Overpass',
-  scaffoldBackgroundColor: immichBackgroundColor,
-  snackBarTheme: const SnackBarThemeData(
-    contentTextStyle: TextStyle(
-      fontFamily: 'Overpass',
-      color: Colors.indigo,
-      fontWeight: FontWeight.bold,
-    ),
-    backgroundColor: Colors.white,
-  ),
-  appBarTheme: const AppBarTheme(
-    titleTextStyle: TextStyle(
-      fontFamily: 'Overpass',
-      color: Colors.indigo,
-      fontWeight: FontWeight.bold,
-      fontSize: 18,
-    ),
-    backgroundColor: immichBackgroundColor,
-    foregroundColor: Colors.indigo,
-    elevation: 0,
-    scrolledUnderElevation: 0,
-    centerTitle: true,
-  ),
-  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
-    type: BottomNavigationBarType.fixed,
-    backgroundColor: immichBackgroundColor,
-    selectedItemColor: Colors.indigo,
-  ),
-  cardTheme: const CardTheme(
-    surfaceTintColor: Colors.transparent,
-  ),
-  drawerTheme: const DrawerThemeData(
-    backgroundColor: immichBackgroundColor,
-  ),
-  textTheme: const TextTheme(
-    displayLarge: TextStyle(
-      fontSize: 26,
-      fontWeight: FontWeight.bold,
-      color: Colors.indigo,
-    ),
-    displayMedium: TextStyle(
-      fontSize: 14,
-      fontWeight: FontWeight.bold,
-      color: Colors.black87,
-    ),
-    displaySmall: TextStyle(
-      fontSize: 12,
-      fontWeight: FontWeight.bold,
-      color: Colors.indigo,
-    ),
-    titleSmall: TextStyle(
-      fontSize: 16.0,
-      fontWeight: FontWeight.bold,
-    ),
-    titleMedium: TextStyle(
-      fontSize: 18.0,
-      fontWeight: FontWeight.bold,
-    ),
-    titleLarge: TextStyle(
-      fontSize: 26.0,
-      fontWeight: FontWeight.bold,
-    ),
-  ),
-  elevatedButtonTheme: ElevatedButtonThemeData(
-    style: ElevatedButton.styleFrom(
-      backgroundColor: Colors.indigo,
-      foregroundColor: Colors.white,
-    ),
-  ),
-  chipTheme: base.chipTheme,
-  sliderTheme: base.sliderTheme,
-  popupMenuTheme: const PopupMenuThemeData(
-    shape: RoundedRectangleBorder(
-      borderRadius: BorderRadius.all(Radius.circular(10)),
-    ),
-    surfaceTintColor: Colors.transparent,
-    color: Colors.white,
-  ),
-  navigationBarTheme: NavigationBarThemeData(
-    indicatorColor: Colors.indigo.withOpacity(0.15),
-    iconTheme: MaterialStatePropertyAll(
-      IconThemeData(color: Colors.grey[700]),
-    ),
-    backgroundColor: immichBackgroundColor,
-    surfaceTintColor: Colors.transparent,
-    labelTextStyle: MaterialStatePropertyAll(
-      TextStyle(
-        fontSize: 13,
-        fontWeight: FontWeight.w500,
-        color: Colors.grey[800],
-      ),
-    ),
-  ),
-  dialogTheme: const DialogTheme(
-    surfaceTintColor: Colors.transparent,
-  ),
-  inputDecorationTheme: const InputDecorationTheme(
-    focusedBorder: OutlineInputBorder(
-      borderSide: BorderSide(
-        color: Colors.indigo,
-      ),
-    ),
-    labelStyle: TextStyle(
-      color: Colors.indigo,
-    ),
-    hintStyle: TextStyle(
-      fontSize: 14.0,
-      fontWeight: FontWeight.normal,
-    ),
-  ),
-  textSelectionTheme: const TextSelectionThemeData(
-    cursorColor: Colors.indigo,
-  ),
+  primary: Color(0xff4755b5),
+  onPrimary: Color(0xffffffff),
+  primaryContainer: Color(0xffdfe0ff),
+  onPrimaryContainer: Color(0xff000d60),
+  secondary: Color(0xff5b5d72),
+  onSecondary: Color(0xffffffff),
+  secondaryContainer: Color(0xFFD6D8FF),
+  onSecondaryContainer: Color(0xff181a2c),
+  tertiary: Color(0xff77536c),
+  onTertiary: Color(0xffffffff),
+  tertiaryContainer: Color(0xffffd7f0),
+  onTertiaryContainer: Color(0xff2d1127),
+  error: Color(0xffba1a1a),
+  onError: Color(0xffffffff),
+  errorContainer: Color(0xffffdad6),
+  onErrorContainer: Color(0xff410002),
+  background: Color(0xfff9f6fc),
+  onBackground: Color(0xff1b1b1f),
+  surface: Color(0xfff9f6fc),
+  onSurface: Color(0xff1b1b1f),
+  surfaceVariant: Color(0xffdeddea),
+  onSurfaceVariant: Color(0xff46464f),
+  outline: Color(0xff777680),
+  outlineVariant: Color(0xffc7c5d0),
+  shadow: Color(0xff000000),
+  scrim: Color(0xff000000),
+  inverseSurface: Color(0xff303137),
+  onInverseSurface: Color(0xfff3f0f4),
+  inversePrimary: Color(0xffbcc3ff),
+  surfaceTint: Color(0xff4755b5),
 );

-ThemeData immichDarkTheme = ThemeData(
-  useMaterial3: true,
+ColorScheme _darkColorScheme = const ColorScheme(
  brightness: Brightness.dark,
-  primarySwatch: Colors.indigo,
-  primaryColor: immichDarkThemePrimaryColor,
-  scaffoldBackgroundColor: immichDarkBackgroundColor,
-  hintColor: Colors.grey[600],
-  fontFamily: 'Overpass',
-  snackBarTheme: SnackBarThemeData(
-    contentTextStyle: const TextStyle(
-      fontFamily: 'Overpass',
-      color: immichDarkThemePrimaryColor,
-      fontWeight: FontWeight.bold,
-    ),
-    backgroundColor: Colors.grey[900],
-  ),
-  textButtonTheme: TextButtonThemeData(
-    style: TextButton.styleFrom(
-      foregroundColor: immichDarkThemePrimaryColor,
-    ),
-  ),
-  appBarTheme: const AppBarTheme(
-    titleTextStyle: TextStyle(
-      fontFamily: 'Overpass',
-      color: immichDarkThemePrimaryColor,
-      fontWeight: FontWeight.bold,
-      fontSize: 18,
-    ),
-    backgroundColor: Color.fromARGB(255, 32, 33, 35),
-    foregroundColor: immichDarkThemePrimaryColor,
-    elevation: 0,
-    scrolledUnderElevation: 0,
-    centerTitle: true,
-  ),
-  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
-    type: BottomNavigationBarType.fixed,
-    backgroundColor: Color.fromARGB(255, 35, 36, 37),
-    selectedItemColor: immichDarkThemePrimaryColor,
-  ),
-  drawerTheme: DrawerThemeData(
-    backgroundColor: immichDarkBackgroundColor,
-    scrimColor: Colors.white.withOpacity(0.1),
-  ),
-  textTheme: const TextTheme(
-    displayLarge: TextStyle(
-      fontSize: 26,
-      fontWeight: FontWeight.bold,
-      color: Color.fromARGB(255, 255, 255, 255),
-    ),
-    displayMedium: TextStyle(
-      fontSize: 14,
-      fontWeight: FontWeight.bold,
-      color: Color.fromARGB(255, 255, 255, 255),
-    ),
-    displaySmall: TextStyle(
-      fontSize: 12,
-      fontWeight: FontWeight.bold,
-      color: immichDarkThemePrimaryColor,
-    ),
-    titleSmall: TextStyle(
-      fontSize: 16.0,
-      fontWeight: FontWeight.bold,
-    ),
-    titleMedium: TextStyle(
-      fontSize: 18.0,
-      fontWeight: FontWeight.bold,
-    ),
-    titleLarge: TextStyle(
-      fontSize: 26.0,
-      fontWeight: FontWeight.bold,
-    ),
-  ),
-  cardColor: Colors.grey[900],
-  elevatedButtonTheme: ElevatedButtonThemeData(
-    style: ElevatedButton.styleFrom(
-      foregroundColor: Colors.black87,
-      backgroundColor: immichDarkThemePrimaryColor,
-    ),
-  ),
-  chipTheme: base.chipTheme,
-  sliderTheme: base.sliderTheme,
-  popupMenuTheme: const PopupMenuThemeData(
-    shape: RoundedRectangleBorder(
-      borderRadius: BorderRadius.all(Radius.circular(10)),
-    ),
-    surfaceTintColor: Colors.transparent,
-  ),
-  navigationBarTheme: NavigationBarThemeData(
-    indicatorColor: immichDarkThemePrimaryColor.withOpacity(0.4),
-    iconTheme: MaterialStatePropertyAll(
-      IconThemeData(color: Colors.grey[500]),
-    ),
-    backgroundColor: Colors.grey[900],
-    surfaceTintColor: Colors.transparent,
-    labelTextStyle: MaterialStatePropertyAll(
-      TextStyle(
-        fontSize: 13,
-        fontWeight: FontWeight.w500,
-        color: Colors.grey[300],
-      ),
-    ),
-  ),
-  dialogTheme: const DialogTheme(
-    surfaceTintColor: Colors.transparent,
-  ),
-  inputDecorationTheme: const InputDecorationTheme(
-    focusedBorder: OutlineInputBorder(
-      borderSide: BorderSide(
-        color: immichDarkThemePrimaryColor,
-      ),
-    ),
-    labelStyle: TextStyle(
-      color: immichDarkThemePrimaryColor,
-    ),
-    hintStyle: TextStyle(
-      fontSize: 14.0,
-      fontWeight: FontWeight.normal,
-    ),
-  ),
-  textSelectionTheme: const TextSelectionThemeData(
-    cursorColor: immichDarkThemePrimaryColor,
-  ),
+  primary: Color(0xffa4c8ff),
+  onPrimary: Color(0xff00315e),
+  primaryContainer: Color(0xFF182C40),
+  onPrimaryContainer: Color(0xffd4e3ff),
+  secondary: Color(0xffbcc7dc),
+  onSecondary: Color(0xff37474f),
+  secondaryContainer: Color(0xff3d4758),
+  onSecondaryContainer: Color(0xffd8e3f8),
+  tertiary: Color(0xffdabde2),
+  onTertiary: Color(0xff3d2946),
+  tertiaryContainer: Color(0xff543f5e),
+  onTertiaryContainer: Color(0xfff6d9ff),
+  error: Color(0xffffb4ab),
+  onError: Color(0xff690005),
+  errorContainer: Color(0xff93000a),
+  onErrorContainer: Color(0xffffb4ab),
+  background: Color(0xff101214),
+  onBackground: Color(0xffe2e2e5),
+  surface: Color(0xff101214),
+  onSurface: Color(0xffe2e2e5),
+  surfaceVariant: Color(0xff363c42),
+  onSurfaceVariant: Color(0xffc1c7ce),
+  outline: Color(0xff8b9198),
+  outlineVariant: Color(0xff41474d),
+  shadow: Color(0xff000000),
+  scrim: Color(0xff000000),
+  inverseSurface: Color(0xffeeeef1),
+  onInverseSurface: Color(0xff2e3133),
+  inversePrimary: Color(0xff1c5fa5),
+  surfaceTint: Color(0xff90caf9),
 );
+
+ThemeData getThemeForScheme(ColorScheme scheme) {
+  return ThemeData(
+    useMaterial3: true,
+    brightness: scheme.brightness,
+    colorScheme: scheme,
+    primaryColor: scheme.primary,
+    scaffoldBackgroundColor: scheme.background,
+    fontFamily: 'Overpass',
+    appBarTheme: AppBarTheme(
+      iconTheme: IconThemeData(color: scheme.primary),
+      titleTextStyle: TextStyle(
+        fontSize: 18.0,
+        fontWeight: FontWeight.bold,
+        color: scheme.primary,
+      ),
+      centerTitle: true,
+      scrolledUnderElevation: 4.0,
+      elevation: 4.0,
+    ),
+    snackBarTheme: const SnackBarThemeData(
+      contentTextStyle: TextStyle(
+        fontFamily: 'Overpass',
+        fontWeight: FontWeight.bold,
+      ),
+    ),
+    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
+      type: BottomNavigationBarType.fixed,
+    ),
+    cardTheme: const CardTheme(elevation: 2.0),
+    elevatedButtonTheme: ElevatedButtonThemeData(
+      style: ElevatedButton.styleFrom(
+        visualDensity: VisualDensity.standard,
+        textStyle: const TextStyle(
+          fontWeight: FontWeight.bold,
+          fontSize: 11,
+        ),
+        shadowColor: scheme.shadow,
+        foregroundColor: scheme.onPrimary,
+        backgroundColor: scheme.primary,
+      ),
+    ),
+    navigationBarTheme: NavigationBarThemeData(
+      iconTheme: MaterialStateProperty.resolveWith<IconThemeData?>((states) {
+        if (states.contains(MaterialState.selected)) {
+          return IconThemeData(color: scheme.primary);
+        }
+        return null;
+      }),
+      labelTextStyle: const MaterialStatePropertyAll(
+        TextStyle(
+          fontSize: 13,
+          fontWeight: FontWeight.w500,
+        ),
+      ),
+    ),
+    textTheme: TextTheme(
+      displayLarge: TextStyle(
+        fontSize: 26,
+        fontWeight: FontWeight.bold,
+        color: scheme.primary,
+      ),
+      displayMedium: const TextStyle(
+        fontSize: 14,
+        fontWeight: FontWeight.bold,
+      ),
+      displaySmall: const TextStyle(
+        fontSize: 12,
+        fontWeight: FontWeight.bold,
+      ),
+      titleSmall: const TextStyle(
+        fontSize: 16.0,
+        fontWeight: FontWeight.bold,
+      ),
+      titleMedium: const TextStyle(
+        fontSize: 18.0,
+        fontWeight: FontWeight.bold,
+      ),
+      titleLarge: TextStyle(
+        fontSize: 26.0,
+        fontWeight: FontWeight.bold,
+        color: scheme.primary,
+      ),
+    ),
+    chipTheme: const ChipThemeData(
+      side: BorderSide.none,
+    ),
+    sliderTheme: const SliderThemeData(
+      thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
+      trackHeight: 2.0,
+    ),
+    inputDecorationTheme: InputDecorationTheme(
+      labelStyle: TextStyle(
+        color: scheme.primary,
+      ),
+      hintStyle: const TextStyle(
+        fontSize: 14.0,
+        fontWeight: FontWeight.normal,
+      ),
+    ),
+  );
+}
+
+final ThemeData immichLightTheme = getThemeForScheme(_lightColorScheme);
+final ThemeData immichDarkTheme = getThemeForScheme(_darkColorScheme);
+
+const redAccent = Colors.redAccent;
+const orangeAccent = Colors.orangeAccent;
--- a/mobile/pubspec.lock
+++ b/mobile/pubspec.lock
@ -369,6 +369,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "7.0.0"
+  dynamic_color:
+    dependency: "direct main"
+    description:
+      name: dynamic_color
+      sha256: "8b8bd1d798bd393e11eddeaa8ae95b12ff028bf7d5998fc5d003488cd5f4ce2f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.6.8"
  easy_image_viewer:
    dependency: "direct main"
    description:
--- a/mobile/pubspec.yaml
+++ b/mobile/pubspec.yaml
@ -58,6 +58,7 @@ dependencies:
  wakelock_plus: ^1.1.1
  flutter_local_notifications: ^15.1.0+1
  timezone: ^0.9.2
+  dynamic_color: ^1.6.8

  openapi:
    path: openapi
Author	SHA1	Message	Date
shalong-tanwen	3b8656a603	style: colors	2023-12-03 23:54:47 +05:30
shalong-tanwen	85841e3349	refactor: theme provider to generator	2023-12-03 23:08:10 +05:30
shalong-tanwen	966b38b99f	Merge branch 'main' into refactor/mobile-colors	2023-12-03 23:02:28 +05:30
shalong-tanwen	748821d7a7	chore: pull main	2023-11-19 12:04:25 +05:30
shalong-tanwen	ecb1669ab8	wip(mobile): unify-colors	2023-11-19 11:54:42 +05:30
shalong-tanwen	780d3b174d	chore: pull main	2023-11-11 15:11:12 +05:30
shalong-tanwen	d20801c65c	wip(mobile): unify-colors	2023-11-11 09:48:29 +05:30