Add mobile dark mode and user setting (#468)

* styling light and dark theme * Icon topbar * Fixed app bar title dark theme * Fixed issue with getting thumbnail for things * Refactor sharing page * Refactor scroll thumb * Refactor chip in auto backup indiation button * Refactor sharing page * Added theme toggle * Up version for testflight build * Refactor backup controller page * Refactor album selection page * refactor album pages * Refactor gradient color profile header * Added theme switcher * Register app theme correctly * Added locale to the app * Added translation key * Styling for bottomsheet colors * up server version * Fixed font size * Fixed overlapsed sliverappbar on photos screen
2025-11-14 17:36:12 +00:00 · 2022-08-15 18:53:30 -05:00 · 2022-08-15 18:53:30 -05:00 · c1b22125fd
commit c1b22125fd
parent 30f069a5db
47 changed files with 536 additions and 307 deletions
--- a/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
+++ b/mobile/lib/modules/home/ui/control_bottom_app_bar.dart
@ -1,11 +1,9 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart';
 import 'package:immich_mobile/modules/home/ui/delete_diaglog.dart';

-import '../../../shared/providers/asset.provider.dart';
-import '../providers/home_page_state.provider.dart';
-
 class ControlBottomAppBar extends ConsumerWidget {
  const ControlBottomAppBar({Key? key}) : super(key: key);

@ -19,10 +17,10 @@ class ControlBottomAppBar extends ConsumerWidget {
        height: MediaQuery.of(context).size.height * 0.15,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
-            topLeft: Radius.circular(15),
-            topRight: Radius.circular(15),
+            topLeft: Radius.circular(8),
+            topRight: Radius.circular(8),
          ),
-          color: Colors.grey[300]?.withOpacity(0.98),
+          color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.95),
        ),
        child: Column(
          children: [
--- a/mobile/lib/modules/home/ui/daily_title_text.dart
+++ b/mobile/lib/modules/home/ui/daily_title_text.dart
@ -86,7 +86,6 @@ class DailyTitleText extends ConsumerWidget {
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.bold,
-                color: Colors.black87,
              ),
            ),
            const Spacer(),
--- a/mobile/lib/modules/home/ui/disable_multi_select_button.dart
+++ b/mobile/lib/modules/home/ui/disable_multi_select_button.dart
@ -14,32 +14,22 @@ class DisableMultiSelectButton extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Positioned(
-      top: 0,
+      top: 10,
      left: 0,
      child: Padding(
        padding: const EdgeInsets.only(left: 16.0, top: 46),
-        child: Material(
-          elevation: 20,
-          borderRadius: BorderRadius.circular(35),
-          child: Container(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(35),
-              color: Colors.grey[100],
-            ),
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 4.0),
-              child: TextButton.icon(
-                onPressed: () {
-                  onPressed();
-                },
-                icon: const Icon(Icons.close_rounded),
-                label: Text(
-                  '$selectedItemCount',
-                  style: const TextStyle(
-                    fontWeight: FontWeight.w600,
-                    fontSize: 18,
-                  ),
-                ),
+        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,
              ),
            ),
          ),
--- a/mobile/lib/modules/home/ui/immich_sliver_appbar.dart
+++ b/mobile/lib/modules/home/ui/immich_sliver_appbar.dart
@ -30,6 +30,7 @@ class ImmichSliverAppBar extends ConsumerWidget {
      floating: true,
      pinned: false,
      snap: false,
+      backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
@ -57,7 +58,7 @@ class ImmichSliverAppBar extends ConsumerWidget {
                  child: GestureDetector(
                    onTap: () => Scaffold.of(context).openDrawer(),
                    child: Material(
-                      color: Colors.grey[200],
+                      // color: Colors.grey[200],
                      elevation: 1,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0),
@ -77,13 +78,12 @@ class ImmichSliverAppBar extends ConsumerWidget {
          );
        },
      ),
-      title: Text(
+      title: const Text(
        'IMMICH',
        style: TextStyle(
          fontFamily: 'SnowburstOne',
          fontWeight: FontWeight.bold,
          fontSize: 22,
-          color: Theme.of(context).primaryColor,
        ),
      ),
      actions: [
@ -112,12 +112,13 @@ class ImmichSliverAppBar extends ConsumerWidget {
                  ? const Icon(Icons.backup_rounded)
                  : Badge(
                      padding: const EdgeInsets.all(4),
-                      elevation: 2,
+                      elevation: 3,
                      position: BadgePosition.bottomEnd(bottom: -4, end: -4),
                      badgeColor: Colors.white,
                      badgeContent: const Icon(
                        Icons.cloud_off_rounded,
                        size: 8,
+                        color: Colors.indigo,
                      ),
                      child: const Icon(Icons.backup_rounded),
                    ),
--- a/mobile/lib/modules/home/ui/monthly_title_text.dart
+++ b/mobile/lib/modules/home/ui/monthly_title_text.dart
@ -22,7 +22,7 @@ class MonthlyTitleText extends StatelessWidget {
          style: TextStyle(
            fontSize: 26,
            fontWeight: FontWeight.bold,
-            color: Theme.of(context).primaryColor,
+            color: Theme.of(context).textTheme.headline1?.color,
          ),
        ),
      ),
--- a/mobile/lib/modules/home/ui/profile_drawer/profile_drawer.dart
+++ b/mobile/lib/modules/home/ui/profile_drawer/profile_drawer.dart
@ -22,17 +22,16 @@ class ProfileDrawer extends HookConsumerWidget {
          height: double.infinity,
          child: Icon(
            Icons.logout_rounded,
-            color: Colors.grey[700],
+            color: Theme.of(context).textTheme.labelMedium?.color,
            size: 20,
          ),
        ),
        title: Text(
          "profile_drawer_sign_out",
-          style: TextStyle(
-            color: Colors.grey[700],
-            fontSize: 12,
-            fontWeight: FontWeight.bold,
-          ),
+          style: Theme.of(context)
+              .textTheme
+              .labelLarge
+              ?.copyWith(fontWeight: FontWeight.bold),
        ).tr(),
        onTap: () async {
          bool res = await ref.watch(authenticationProvider.notifier).logout();
@ -54,17 +53,16 @@ class ProfileDrawer extends HookConsumerWidget {
          height: double.infinity,
          child: Icon(
            Icons.settings_rounded,
-            color: Colors.grey[700],
+            color: Theme.of(context).textTheme.labelMedium?.color,
            size: 20,
          ),
        ),
        title: Text(
          "profile_drawer_settings",
-          style: TextStyle(
-            color: Colors.grey[700],
-            fontSize: 12,
-            fontWeight: FontWeight.bold,
-          ),
+          style: Theme.of(context)
+              .textTheme
+              .labelLarge
+              ?.copyWith(fontWeight: FontWeight.bold),
        ).tr(),
        onTap: () {
          AutoRouter.of(context).push(const SettingsRoute());
--- a/mobile/lib/modules/home/ui/profile_drawer/profile_drawer_header.dart
+++ b/mobile/lib/modules/home/ui/profile_drawer/profile_drawer_header.dart
@ -23,6 +23,7 @@ class ProfileDrawerHeader extends HookConsumerWidget {
    final uploadProfileImageStatus =
        ref.watch(uploadProfileImageProvider).status;
    var dummmy = Random().nextInt(1024);
+    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    _buildUserProfileImage() {
      if (authState.profileImagePath.isEmpty) {
@ -104,13 +105,19 @@ class ProfileDrawerHeader extends HookConsumerWidget {
    );

    return DrawerHeader(
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
        gradient: LinearGradient(
-          colors: [
-            Color.fromARGB(255, 216, 219, 238),
-            Color.fromARGB(255, 242, 242, 242),
-            Colors.white,
-          ],
+          colors: isDarkMode
+              ? [
+                  const Color.fromARGB(255, 22, 25, 48),
+                  const Color.fromARGB(255, 13, 13, 13),
+                  const Color.fromARGB(255, 0, 0, 0),
+                ]
+              : [
+                  const Color.fromARGB(255, 216, 219, 238),
+                  const Color.fromARGB(255, 242, 242, 242),
+                  Colors.white,
+                ],
          begin: Alignment.centerRight,
          end: Alignment.centerLeft,
        ),
@ -129,8 +136,8 @@ class ProfileDrawerHeader extends HookConsumerWidget {
                child: GestureDetector(
                  onTap: _pickUserProfileImage,
                  child: Material(
-                    color: Colors.grey[50],
-                    elevation: 2,
+                    color: Colors.grey[100],
+                    elevation: 3,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50.0),
                    ),
@ -157,7 +164,7 @@ class ProfileDrawerHeader extends HookConsumerWidget {
          ),
          Text(
            authState.userEmail,
-            style: TextStyle(color: Colors.grey[800], fontSize: 12),
+            style: Theme.of(context).textTheme.labelMedium,
          )
        ],
      ),
--- a/mobile/lib/modules/home/ui/profile_drawer/server_info_box.dart
+++ b/mobile/lib/modules/home/ui/profile_drawer/server_info_box.dart
@ -38,7 +38,7 @@ class ServerInfoBox extends HookConsumerWidget {
      padding: const EdgeInsets.all(8.0),
      child: Card(
        elevation: 0,
-        color: Colors.grey[100],
+        color: Theme.of(context).scaffoldBackgroundColor,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5), // if you need this
          side: const BorderSide(
@ -65,7 +65,10 @@ class ServerInfoBox extends HookConsumerWidget {
                  ),
                ),
              ),
-              const Divider(),
+              const Divider(
+                color: Color.fromARGB(101, 201, 201, 201),
+                thickness: 1,
+              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
@ -87,7 +90,10 @@ class ServerInfoBox extends HookConsumerWidget {
                  ),
                ],
              ),
-              const Divider(),
+              const Divider(
+                color: Color.fromARGB(101, 201, 201, 201),
+                thickness: 1,
+              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
--- a/mobile/lib/modules/home/views/home_page.dart
+++ b/mobile/lib/modules/home/views/home_page.dart
@ -117,9 +117,9 @@ class HomePage extends HookConsumerWidget {
              ],
            ),
            Padding(
-              padding: const EdgeInsets.only(top: 50.0),
+              padding: const EdgeInsets.only(top: 60.0, bottom: 30.0),
              child: DraggableScrollbar.semicircle(
-                backgroundColor: Theme.of(context).primaryColor,
+                backgroundColor: Theme.of(context).hintColor,
                controller: scrollController,
                heightScrollThumb: 48.0,
                child: CustomScrollView(