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

* feat(mobile): add support for material themes Added support for custom theming and updated all elements accordingly. * fix(mobile): Restored immich brand colors to default theme * fix(mobile): make ListTile titles bold in settings main page * feat(mobile): update bottom nav and appbar colors * small tweaks --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-08-10 23:22:22 +02:00 · 2024-08-06 19:50:27 +05:30
parent 20262209ce
commit 0eacdf93eb
65 changed files with 944 additions and 563 deletions
--- a/mobile/lib/pages/backup/album_preview.page.dart
+++ b/mobile/lib/pages/backup/album_preview.page.dart
@@ -4,6 +4,8 @@ import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/widgets/common/immich_loading_indicator.dart';
 import 'package:photo_manager/photo_manager.dart';

@@ -46,7 +48,7 @@ class AlbumPreviewPage extends HookConsumerWidget {
                "ID ${album.id}",
                style: TextStyle(
                  fontSize: 10,
-                  color: Colors.grey[600],
+                  color: context.colorScheme.onSurfaceSecondary,
                  fontWeight: FontWeight.bold,
                ),
              ),
--- a/mobile/lib/pages/backup/backup_album_selection.page.dart
+++ b/mobile/lib/pages/backup/backup_album_selection.page.dart
@@ -3,7 +3,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/providers/backup/backup.provider.dart';
 import 'package:immich_mobile/widgets/backup/album_info_card.dart';
@@ -128,13 +127,12 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                album.name,
                style: TextStyle(
                  fontSize: 12,
-                  color: isDarkTheme ? Colors.black : immichBackgroundColor,
+                  color: context.scaffoldBackgroundColor,
                  fontWeight: FontWeight.bold,
                ),
              ),
              backgroundColor: Colors.red[300],
-              deleteIconColor:
-                  isDarkTheme ? Colors.black : immichBackgroundColor,
+              deleteIconColor: context.scaffoldBackgroundColor,
              deleteIcon: const Icon(
                Icons.cancel_rounded,
                size: 15,
--- a/mobile/lib/pages/backup/backup_controller.page.dart
+++ b/mobile/lib/pages/backup/backup_controller.page.dart
@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/models/backup/backup_state.model.dart';
 import 'package:immich_mobile/providers/album/album.provider.dart';
 import 'package:immich_mobile/providers/backup/backup.provider.dart';
@@ -130,9 +131,7 @@ class BackupControllerPage extends HookConsumerWidget {
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
            side: BorderSide(
-              color: context.isDarkTheme
-                  ? const Color.fromARGB(255, 56, 56, 56)
-                  : Colors.black12,
+              color: context.colorScheme.outlineVariant,
              width: 1,
            ),
          ),
@@ -151,7 +150,9 @@ class BackupControllerPage extends HookConsumerWidget {
                children: [
                  Text(
                    "backup_controller_page_to_backup",
-                    style: context.textTheme.bodyMedium,
+                    style: context.textTheme.bodyMedium?.copyWith(
+                      color: context.colorScheme.onSurfaceSecondary,
+                    ),
                  ).tr(),
                  buildSelectedAlbumName(),
                  buildExcludedAlbumName(),
--- a/mobile/lib/pages/common/album_options.page.dart
+++ b/mobile/lib/pages/common/album_options.page.dart
@@ -5,6 +5,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/providers/album/shared_album.provider.dart';
 import 'package:immich_mobile/providers/authentication.provider.dart';
 import 'package:immich_mobile/utils/immich_loading_overlay.dart';
@@ -102,7 +103,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
      }

      showModalBottomSheet(
-        backgroundColor: context.scaffoldBackgroundColor,
+        backgroundColor: context.colorScheme.surfaceContainer,
        isScrollControlled: false,
        context: context,
        builder: (context) {
@@ -131,7 +132,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
        ),
        subtitle: Text(
          album.owner.value?.email ?? "",
-          style: TextStyle(color: Colors.grey[600]),
+          style: TextStyle(color: context.colorScheme.onSurfaceSecondary),
        ),
        trailing: Text(
          "shared_album_section_people_owner_label",
@@ -160,7 +161,9 @@ class AlbumOptionsPage extends HookConsumerWidget {
            ),
            subtitle: Text(
              user.email,
-              style: TextStyle(color: Colors.grey[600]),
+              style: TextStyle(
+                color: context.colorScheme.onSurfaceSecondary,
+              ),
            ),
            trailing: userId == user.id || isOwner
                ? const Icon(Icons.more_horiz_rounded)
@@ -214,7 +217,7 @@ class AlbumOptionsPage extends HookConsumerWidget {
              subtitle: Text(
                "shared_album_activity_setting_subtitle",
                style: context.textTheme.labelLarge?.copyWith(
-                  color: context.textTheme.labelLarge?.color?.withAlpha(175),
+                  color: context.colorScheme.onSurfaceSecondary,
                ),
              ).tr(),
            ),
--- a/mobile/lib/pages/common/album_viewer.page.dart
+++ b/mobile/lib/pages/common/album_viewer.page.dart
@@ -14,7 +14,7 @@ import 'package:immich_mobile/providers/album/current_album.provider.dart';
 import 'package:immich_mobile/providers/album/shared_album.provider.dart';
 import 'package:immich_mobile/utils/immich_loading_overlay.dart';
 import 'package:immich_mobile/services/album.service.dart';
-import 'package:immich_mobile/widgets/album/album_action_outlined_button.dart';
+import 'package:immich_mobile/widgets/album/album_action_filled_button.dart';
 import 'package:immich_mobile/widgets/album/album_viewer_editable_title.dart';
 import 'package:immich_mobile/providers/multiselect.provider.dart';
 import 'package:immich_mobile/providers/authentication.provider.dart';
@@ -114,13 +114,13 @@ class AlbumViewerPage extends HookConsumerWidget {
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
-              AlbumActionOutlinedButton(
+              AlbumActionFilledButton(
                iconData: Icons.add_photo_alternate_outlined,
                onPressed: () => onAddPhotosPressed(album),
                labelText: "share_add_photos".tr(),
              ),
              if (userId == album.ownerId)
-                AlbumActionOutlinedButton(
+                AlbumActionFilledButton(
                  iconData: Icons.person_add_alt_rounded,
                  onPressed: () => onAddUsersPressed(album),
                  labelText: "album_viewer_page_share_add_users".tr(),
--- a/mobile/lib/pages/common/app_log.page.dart
+++ b/mobile/lib/pages/common/app_log.page.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:immich_mobile/entities/logger_message.entity.dart';
 import 'package:immich_mobile/services/immich_logger.service.dart';
@@ -18,7 +19,6 @@ class AppLogPage extends HookConsumerWidget {
  Widget build(BuildContext context, WidgetRef ref) {
    final immichLogger = ImmichLogger();
    final logMessages = useState(immichLogger.messages);
-    final isDarkTheme = context.isDarkTheme;

    Widget colorStatusIndicator(Color color) {
      return Column(
@@ -55,13 +55,9 @@ class AppLogPage extends HookConsumerWidget {
        case LogLevel.INFO:
          return Colors.transparent;
        case LogLevel.SEVERE:
-          return isDarkTheme
-              ? Colors.redAccent.withOpacity(0.25)
-              : Colors.redAccent.withOpacity(0.075);
+          return Colors.redAccent.withOpacity(0.25);
        case LogLevel.WARNING:
-          return isDarkTheme
-              ? Colors.orangeAccent.withOpacity(0.25)
-              : Colors.orangeAccent.withOpacity(0.075);
+          return Colors.orangeAccent.withOpacity(0.25);
        default:
          return context.primaryColor.withOpacity(0.1);
      }
@@ -120,10 +116,7 @@ class AppLogPage extends HookConsumerWidget {
      ),
      body: ListView.separated(
        separatorBuilder: (context, index) {
-          return Divider(
-            height: 0,
-            color: isDarkTheme ? Colors.white70 : Colors.grey[600],
-          );
+          return const Divider(height: 0);
        },
        itemCount: logMessages.value.length,
        itemBuilder: (context, index) {
@@ -141,8 +134,9 @@ class AppLogPage extends HookConsumerWidget {
            minLeadingWidth: 10,
            title: Text(
              truncateLogMessage(logMessage.message, 4),
-              style: const TextStyle(
+              style: TextStyle(
                fontSize: 14.0,
+                color: context.colorScheme.onSurface,
                fontFamily: "Inconsolata",
              ),
            ),
@@ -150,7 +144,7 @@ class AppLogPage extends HookConsumerWidget {
              "at ${DateFormat("HH:mm:ss.SSS").format(logMessage.createdAt)} in ${logMessage.context1}",
              style: TextStyle(
                fontSize: 12.0,
-                color: Colors.grey[600],
+                color: context.colorScheme.onSurfaceSecondary,
              ),
            ),
            leading: buildLeadingIcon(logMessage.level),
--- a/mobile/lib/pages/common/app_log_detail.page.dart
+++ b/mobile/lib/pages/common/app_log_detail.page.dart
@@ -13,8 +13,6 @@ class AppLogDetailPage extends HookConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
-    var isDarkTheme = context.isDarkTheme;
-
    buildTextWithCopyButton(String header, String text) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
@@ -61,7 +59,7 @@ class AppLogDetailPage extends HookConsumerWidget {
            ),
            Container(
              decoration: BoxDecoration(
-                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                color: context.colorScheme.surfaceContainerHigh,
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Padding(
@@ -100,7 +98,7 @@ class AppLogDetailPage extends HookConsumerWidget {
            ),
            Container(
              decoration: BoxDecoration(
-                color: isDarkTheme ? Colors.grey[900] : Colors.grey[200],
+                color: context.colorScheme.surfaceContainerHigh,
                borderRadius: BorderRadius.circular(15.0),
              ),
              child: Padding(
--- a/mobile/lib/pages/common/create_album.page.dart
+++ b/mobile/lib/pages/common/create_album.page.dart
@@ -10,7 +10,7 @@ import 'package:immich_mobile/providers/album/album.provider.dart';
 import 'package:immich_mobile/providers/album/album_title.provider.dart';
 import 'package:immich_mobile/providers/asset.provider.dart';
 import 'package:immich_mobile/routing/router.dart';
-import 'package:immich_mobile/widgets/album/album_action_outlined_button.dart';
+import 'package:immich_mobile/widgets/album/album_action_filled_button.dart';
 import 'package:immich_mobile/widgets/album/album_title_text_field.dart';
 import 'package:immich_mobile/widgets/album/shared_album_thumbnail_image.dart';

@@ -109,20 +109,16 @@ class CreateAlbumPage extends HookConsumerWidget {
      if (selectedAssets.value.isEmpty) {
        return SliverToBoxAdapter(
          child: Padding(
-            padding: const EdgeInsets.only(top: 16, left: 18, right: 18),
-            child: OutlinedButton.icon(
-              style: OutlinedButton.styleFrom(
+            padding: const EdgeInsets.only(top: 16, left: 16, right: 16),
+            child: FilledButton.icon(
+              style: FilledButton.styleFrom(
                alignment: Alignment.centerLeft,
                padding:
-                    const EdgeInsets.symmetric(vertical: 22, horizontal: 16),
-                side: BorderSide(
-                  color: context.isDarkTheme
-                      ? const Color.fromARGB(255, 63, 63, 63)
-                      : const Color.fromARGB(255, 129, 129, 129),
-                ),
+                    const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(5),
+                  borderRadius: BorderRadius.circular(10),
                ),
+                backgroundColor: context.colorScheme.surfaceContainerHighest,
              ),
              onPressed: onSelectPhotosButtonPressed,
              icon: Icon(
@@ -134,7 +130,7 @@ class CreateAlbumPage extends HookConsumerWidget {
                child: Text(
                  'create_shared_album_page_share_select_photos',
                  style: context.textTheme.titleMedium?.copyWith(
-                    color: context.primaryColor,
+                    fontWeight: FontWeight.normal,
                  ),
                ).tr(),
              ),
@@ -154,7 +150,7 @@ class CreateAlbumPage extends HookConsumerWidget {
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
-              AlbumActionOutlinedButton(
+              AlbumActionFilledButton(
                iconData: Icons.add_photo_alternate_outlined,
                onPressed: onSelectPhotosButtonPressed,
                labelText: "share_add_photos".tr(),
--- a/mobile/lib/pages/common/settings.page.dart
+++ b/mobile/lib/pages/common/settings.page.dart
@@ -49,10 +49,6 @@ class SettingsPage extends StatelessWidget {
    return Scaffold(
      appBar: AppBar(
        centerTitle: false,
-        bottom: const PreferredSize(
-          preferredSize: Size.fromHeight(1),
-          child: Divider(height: 1),
-        ),
        title: const Text('setting_pages_app_bar_settings').tr(),
      ),
      body: context.isMobile ? _MobileLayout() : _TabletLayout(),
@@ -67,13 +63,18 @@ class _MobileLayout extends StatelessWidget {
      children: SettingSection.values
          .map(
            (s) => ListTile(
-              title: Text(
-                s.title,
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold,
-                ),
-              ).tr(),
+              contentPadding:
+                  const EdgeInsets.symmetric(vertical: 2.0, horizontal: 16.0),
              leading: Icon(s.icon),
+              title: Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Text(
+                  s.title,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                  ),
+                ).tr(),
+              ),
              onTap: () => context.pushRoute(SettingsSubRoute(section: s)),
            ),
          )
@@ -102,7 +103,7 @@ class _TabletLayout extends HookWidget {
                      leading: Icon(s.icon),
                      selected: s.index == selectedSection.value.index,
                      selectedColor: context.primaryColor,
-                      selectedTileColor: context.primaryColor.withAlpha(50),
+                      selectedTileColor: context.themeData.highlightColor,
                      onTap: () => selectedSection.value = s,
                    ),
                  ),
--- a/mobile/lib/pages/library/library.page.dart
+++ b/mobile/lib/pages/library/library.page.dart
@@ -20,7 +20,6 @@ class LibraryPage extends HookConsumerWidget {
    final trashEnabled =
        ref.watch(serverInfoProvider.select((v) => v.serverFeatures.trash));
    final albums = ref.watch(albumProvider);
-    final isDarkTheme = context.isDarkTheme;
    final albumSortOption = ref.watch(albumSortByOptionsProvider);
    final albumSortIsReverse = ref.watch(albumSortOrderProvider);

@@ -116,12 +115,7 @@ class LibraryPage extends HookConsumerWidget {
                    width: cardSize,
                    height: cardSize,
                    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],
+                      color: context.colorScheme.surfaceContainer,
                      borderRadius: const BorderRadius.all(Radius.circular(20)),
                    ),
                    child: Center(
@@ -139,7 +133,9 @@ class LibraryPage extends HookConsumerWidget {
                    ),
                    child: Text(
                      'library_page_new_album',
-                      style: context.textTheme.labelLarge,
+                      style: context.textTheme.labelLarge?.copyWith(
+                        color: context.colorScheme.onSurface,
+                      ),
                    ).tr(),
                  ),
                ],
@@ -156,26 +152,25 @@ class LibraryPage extends HookConsumerWidget {
      Function() onClick,
    ) {
      return Expanded(
-        child: OutlinedButton.icon(
+        child: FilledButton.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),
+                color: context.colorScheme.onSurface,
              ),
            ),
          ),
-          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: FilledButton.styleFrom(
+            elevation: 0,
+            padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
+            backgroundColor: context.colorScheme.surfaceContainer,
            alignment: Alignment.centerLeft,
+            shape: const RoundedRectangleBorder(
+              borderRadius: BorderRadius.all(Radius.circular(20)),
+            ),
          ),
          icon: Icon(
            icon,
@@ -247,6 +242,7 @@ class LibraryPage extends HookConsumerWidget {
                  Text(
                    'library_page_albums',
                    style: context.textTheme.bodyLarge?.copyWith(
+                      color: context.colorScheme.onSurface,
                      fontWeight: FontWeight.w500,
                    ),
                  ).tr(),
--- a/mobile/lib/pages/login/login.page.dart
+++ b/mobile/lib/pages/login/login.page.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/widgets/forms/login/login_form.dart';
 import 'package:immich_mobile/routing/router.dart';
 import 'package:package_info_plus/package_info_plus.dart';
@@ -39,8 +40,8 @@ class LoginPage extends HookConsumerWidget {
              children: [
                Text(
                  'v${appVersion.value}',
-                  style: const TextStyle(
-                    color: Colors.grey,
+                  style: TextStyle(
+                    color: context.colorScheme.onSurfaceSecondary,
                    fontWeight: FontWeight.bold,
                    fontFamily: "Inconsolata",
                  ),
--- a/mobile/lib/pages/search/search.page.dart
+++ b/mobile/lib/pages/search/search.page.dart
@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/extensions/asyncvalue_extensions.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/models/search/search_curated_content.model.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
 import 'package:immich_mobile/providers/search/people.provider.dart';
@@ -38,7 +39,7 @@ class SearchPage extends HookConsumerWidget {
      fontSize: 15.0,
    );

-    Color categoryIconColor = context.isDarkTheme ? Colors.white : Colors.black;
+    Color categoryIconColor = context.colorScheme.onSurface;

    showNameEditModel(
      String personId,
@@ -128,13 +129,9 @@ class SearchPage extends HookConsumerWidget {
        },
        child: Card(
          elevation: 0,
+          color: context.colorScheme.surfaceContainerHigh,
          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(20),
-            side: BorderSide(
-              color: context.isDarkTheme
-                  ? Colors.grey[800]!
-                  : const Color.fromARGB(255, 225, 225, 225),
-            ),
+            borderRadius: BorderRadius.circular(50),
          ),
          margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Padding(
@@ -144,13 +141,15 @@ class SearchPage extends HookConsumerWidget {
            ),
            child: Row(
              children: [
-                Icon(Icons.search, color: context.primaryColor),
+                Icon(
+                  Icons.search,
+                  color: context.colorScheme.onSurfaceSecondary,
+                ),
                const SizedBox(width: 16.0),
                Text(
                  "search_bar_hint",
                  style: context.textTheme.bodyLarge?.copyWith(
-                    color:
-                        context.isDarkTheme ? Colors.white70 : Colors.black54,
+                    color: context.colorScheme.onSurfaceSecondary,
                    fontWeight: FontWeight.w400,
                  ),
                ).tr(),
--- a/mobile/lib/pages/search/search_input.page.dart
+++ b/mobile/lib/pages/search/search_input.page.dart
@@ -7,6 +7,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:immich_mobile/entities/asset.entity.dart';
 import 'package:immich_mobile/extensions/build_context_extensions.dart';
+import 'package:immich_mobile/extensions/theme_extensions.dart';
 import 'package:immich_mobile/models/search/search_filter.model.dart';
 import 'package:immich_mobile/providers/search/paginated_search.provider.dart';
 import 'package:immich_mobile/widgets/asset_grid/multiselect_grid.dart';
@@ -509,7 +510,7 @@ class SearchInputPage extends HookConsumerWidget {
                ? 'contextual_search'.tr()
                : 'filename_search'.tr(),
            hintStyle: context.textTheme.bodyLarge?.copyWith(
-              color: context.themeData.colorScheme.onSurface.withOpacity(0.75),
+              color: context.themeData.colorScheme.onSurfaceSecondary,
              fontWeight: FontWeight.w500,
            ),
            enabledBorder: const UnderlineInputBorder(
--- a/mobile/lib/pages/sharing/shared_link/shared_link_edit.page.dart
+++ b/mobile/lib/pages/sharing/shared_link/shared_link_edit.page.dart
@@ -30,6 +30,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
  Widget build(BuildContext context, WidgetRef ref) {
    const padding = 20.0;
    final themeData = context.themeData;
+    final colorScheme = context.colorScheme;
    final descriptionController =
        useTextEditingController(text: existingLink?.description ?? "");
    final descriptionFocusNode = useFocusNode();
@@ -58,7 +59,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
              Text(
                existingLink!.title,
                style: TextStyle(
-                  color: themeData.primaryColor,
+                  color: colorScheme.primary,
                  fontWeight: FontWeight.bold,
                ),
              ),
@@ -81,7 +82,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
                child: Text(
                  existingLink!.description ?? "--",
                  style: TextStyle(
-                    color: themeData.primaryColor,
+                    color: colorScheme.primary,
                    fontWeight: FontWeight.bold,
                  ),
                  overflow: TextOverflow.ellipsis,
@@ -109,7 +110,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
          labelText: 'shared_link_edit_description'.tr(),
          labelStyle: TextStyle(
            fontWeight: FontWeight.bold,
-            color: themeData.primaryColor,
+            color: colorScheme.primary,
          ),
          floatingLabelBehavior: FloatingLabelBehavior.always,
          border: const OutlineInputBorder(),
@@ -135,7 +136,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
          labelText: 'shared_link_edit_password'.tr(),
          labelStyle: TextStyle(
            fontWeight: FontWeight.bold,
-            color: themeData.primaryColor,
+            color: colorScheme.primary,
          ),
          floatingLabelBehavior: FloatingLabelBehavior.always,
          border: const OutlineInputBorder(),
@@ -157,7 +158,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
        onChanged: newShareLink.value.isEmpty
            ? (value) => showMetadata.value = value
            : null,
-        activeColor: themeData.primaryColor,
+        activeColor: colorScheme.primary,
        dense: true,
        title: Text(
          "shared_link_edit_show_meta",
@@ -173,7 +174,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
        onChanged: newShareLink.value.isEmpty
            ? (value) => allowDownload.value = value
            : null,
-        activeColor: themeData.primaryColor,
+        activeColor: colorScheme.primary,
        dense: true,
        title: Text(
          "shared_link_edit_allow_download",
@@ -189,7 +190,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
        onChanged: newShareLink.value.isEmpty
            ? (value) => allowUpload.value = value
            : null,
-        activeColor: themeData.primaryColor,
+        activeColor: colorScheme.primary,
        dense: true,
        title: Text(
          "shared_link_edit_allow_upload",
@@ -205,7 +206,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
        onChanged: newShareLink.value.isEmpty
            ? (value) => editExpiry.value = value
            : null,
-        activeColor: themeData.primaryColor,
+        activeColor: colorScheme.primary,
        dense: true,
        title: Text(
          "shared_link_edit_change_expiry",
@@ -221,7 +222,7 @@ class SharedLinkEditPage extends HookConsumerWidget {
          "shared_link_edit_expire_after",
          style: TextStyle(
            fontWeight: FontWeight.bold,
-            color: themeData.primaryColor,
+            color: colorScheme.primary,
          ),
        ).tr(),
        enableSearch: false,
--- a/mobile/lib/pages/sharing/sharing.page.dart
+++ b/mobile/lib/pages/sharing/sharing.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/theme_extensions.dart';
 import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 import 'package:immich_mobile/providers/album/shared_album.provider.dart';
 import 'package:immich_mobile/widgets/album/album_thumbnail_card.dart';
@@ -83,20 +84,24 @@ class SharingPage extends HookConsumerWidget {
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: context.textTheme.bodyMedium?.copyWith(
-                  color: context.primaryColor,
+                  color: context.colorScheme.onSurface,
                  fontWeight: FontWeight.w500,
                ),
              ),
              subtitle: isOwner
                  ? Text(
                      'album_thumbnail_owned'.tr(),
-                      style: context.textTheme.bodyMedium,
+                      style: context.textTheme.bodyMedium?.copyWith(
+                        color: context.colorScheme.onSurfaceSecondary,
+                      ),
                    )
                  : album.ownerName != null
                      ? Text(
                          'album_thumbnail_shared_by'
                              .tr(args: [album.ownerName!]),
-                          style: context.textTheme.bodyMedium,
+                          style: context.textTheme.bodyMedium?.copyWith(
+                            color: context.colorScheme.onSurfaceSecondary,
+                          ),
                        )
                      : null,
              onTap: () => context
@@ -166,11 +171,13 @@ class SharingPage extends HookConsumerWidget {
          padding: const EdgeInsets.all(8.0),
          child: Card(
            elevation: 0,
-            shape: const RoundedRectangleBorder(
-              borderRadius: BorderRadius.all(Radius.circular(20)),
+            shape: RoundedRectangleBorder(
+              borderRadius: const BorderRadius.all(Radius.circular(20)),
              side: BorderSide(
-                color: Colors.grey,
-                width: 0.5,
+                color: context.isDarkTheme
+                    ? const Color(0xFF383838)
+                    : Colors.black12,
+                width: 1,
              ),
            ),
            child: Padding(