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

mobile/lib/modules/backup/views/backup_album_selection_page.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/immich_colors.dart';
 import 'package:immich_mobile/modules/backup/providers/backup.provider.dart';
 import 'package:immich_mobile/modules/backup/ui/album_info_card.dart';
 import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
@@ -16,6 +17,7 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
     final availableAlbums = ref.watch(backupProvider).availableAlbums;
     final selectedBackupAlbums = ref.watch(backupProvider).selectedBackupAlbums;
     final excludedBackupAlbums = ref.watch(backupProvider).excludedBackupAlbums;
+    final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
 
     useEffect(
       () {
@@ -81,14 +83,16 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
               ),
               label: Text(
                 album.name,
-                style: const TextStyle(
+                style: TextStyle(
                   fontSize: 10,
-                  color: Colors.white,
+                  color: Theme.of(context).brightness == Brightness.dark
+                      ? Colors.black
+                      : Colors.white,
                   fontWeight: FontWeight.bold,
                 ),
               ),
               backgroundColor: Theme.of(context).primaryColor,
-              deleteIconColor: Colors.white,
+              deleteIconColor: isDarkTheme ? Colors.black : Colors.white,
               deleteIcon: const Icon(
                 Icons.cancel_rounded,
                 size: 15,
@@ -119,14 +123,15 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
               ),
               label: Text(
                 album.name,
-                style: const TextStyle(
+                style: TextStyle(
                   fontSize: 10,
-                  color: Colors.white,
+                  color: isDarkTheme ? Colors.black : immichBackgroundColor,
                   fontWeight: FontWeight.bold,
                 ),
               ),
               backgroundColor: Colors.red[300],
-              deleteIconColor: Colors.white,
+              deleteIconColor:
+                  isDarkTheme ? Colors.black : immichBackgroundColor,
               deleteIcon: const Icon(
                 Icons.cancel_rounded,
                 size: 15,
@@ -154,11 +159,16 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
         physics: const ClampingScrollPhysics(),
         children: [
           Padding(
-            padding:
-                const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
+            padding: const EdgeInsets.symmetric(
+              vertical: 8.0,
+              horizontal: 16.0,
+            ),
             child: const Text(
               "backup_album_selection_page_selection_info",
-              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 14,
+              ),
             ).tr(),
           ),
           // Selected Album Chips
@@ -178,9 +188,11 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
             child: Card(
               margin: const EdgeInsets.all(0),
               shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(5), // if you need this
-                side: const BorderSide(
-                  color: Color.fromARGB(255, 235, 235, 235),
+                borderRadius: BorderRadius.circular(5),
+                side: BorderSide(
+                  color: isDarkTheme
+                      ? const Color.fromARGB(255, 0, 0, 0)
+                      : const Color.fromARGB(255, 235, 235, 235),
                   width: 1,
                 ),
               ),
@@ -190,12 +202,11 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                 children: [
                   ListTile(
                     visualDensity: VisualDensity.compact,
-                    title: Text(
+                    title: const Text(
                       "backup_album_selection_page_total_assets",
                       style: TextStyle(
                         fontWeight: FontWeight.bold,
                         fontSize: 14,
-                        color: Colors.grey[700],
                       ),
                     ).tr(),
                     trailing: Text(
@@ -257,11 +268,10 @@ class BackupAlbumSelectionPage extends HookConsumerWidget {
                       content: SingleChildScrollView(
                         child: ListBody(
                           children: [
-                            Text(
+                            const Text(
                               'backup_album_selection_page_assets_scatter',
                               style: TextStyle(
                                 fontSize: 14,
-                                color: Colors.grey[700],
                               ),
                             ).tr(),
                           ],

mobile/lib/modules/backup/views/backup_controller_page.dart

@@ -82,7 +82,7 @@ class BackupControllerPage extends HookConsumerWidget {
       );
     }
 
-    ListTile _buildBackupController() {
+    ListTile _buildAutoBackupController() {
       var backUpOption = authenticationState.deviceInfo.isAutoBackup
           ? "backup_controller_page_status_on".tr()
           : "backup_controller_page_status_off".tr();
@@ -114,13 +114,7 @@ class BackupControllerPage extends HookConsumerWidget {
                 ).tr(),
               Padding(
                 padding: const EdgeInsets.only(top: 8.0),
-                child: OutlinedButton(
-                  style: OutlinedButton.styleFrom(
-                    side: const BorderSide(
-                      width: 1,
-                      color: Color.fromARGB(255, 220, 220, 220),
-                    ),
-                  ),
+                child: ElevatedButton(
                   onPressed: () {
                     if (isAutoBackup) {
                       ref
@@ -134,7 +128,10 @@ class BackupControllerPage extends HookConsumerWidget {
                   },
                   child: Text(
                     backupBtnText,
-                    style: const TextStyle(fontWeight: FontWeight.bold),
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 12,
+                    ),
                   ),
                 ),
               )
@@ -232,33 +229,24 @@ class BackupControllerPage extends HookConsumerWidget {
               children: [
                 const Text(
                   "backup_controller_page_to_backup",
-                  style: TextStyle(color: Color(0xFF808080), fontSize: 12),
+                  style: TextStyle(fontSize: 12),
                 ).tr(),
                 _buildSelectedAlbumName(),
                 _buildExcludedAlbumName()
               ],
             ),
           ),
-          trailing: OutlinedButton(
-            style: OutlinedButton.styleFrom(
-              enableFeedback: true,
-              side: const BorderSide(
-                width: 1,
-                color: Color.fromARGB(255, 220, 220, 220),
-              ),
-            ),
+          trailing: ElevatedButton(
             onPressed: () {
               AutoRouter.of(context).push(const BackupAlbumSelectionRoute());
             },
-            child: Padding(
-              padding: const EdgeInsets.symmetric(
-                vertical: 16.0,
+            child: const Text(
+              "backup_controller_page_select",
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 12,
               ),
-              child: const Text(
-                "backup_controller_page_select",
-                style: TextStyle(fontWeight: FontWeight.bold),
-              ).tr(),
-            ),
+            ).tr(),
           ),
         ),
       );
@@ -324,14 +312,14 @@ class BackupControllerPage extends HookConsumerWidget {
               padding: const EdgeInsets.only(top: 8.0),
               child: Table(
                 border: TableBorder.all(
-                  color: Colors.black12,
+                  color: Theme.of(context).primaryColorLight,
                   width: 1,
                 ),
                 children: [
                   TableRow(
-                    decoration: BoxDecoration(
-                      color: Colors.grey[100],
-                    ),
+                    decoration: const BoxDecoration(
+                        // color: Colors.grey[100],
+                        ),
                     children: [
                       TableCell(
                         verticalAlignment: TableCellVerticalAlignment.middle,
@@ -355,9 +343,9 @@ class BackupControllerPage extends HookConsumerWidget {
                     ],
                   ),
                   TableRow(
-                    decoration: BoxDecoration(
-                      color: Colors.grey[200],
-                    ),
+                    decoration: const BoxDecoration(
+                        // color: Colors.grey[200],
+                        ),
                     children: [
                       TableCell(
                         verticalAlignment: TableCellVerticalAlignment.middle,
@@ -384,9 +372,9 @@ class BackupControllerPage extends HookConsumerWidget {
                     ],
                   ),
                   TableRow(
-                    decoration: BoxDecoration(
-                      color: Colors.grey[100],
-                    ),
+                    decoration: const BoxDecoration(
+                        // color: Colors.grey[100],
+                        ),
                     children: [
                       TableCell(
                         child: Padding(
@@ -463,7 +451,7 @@ class BackupControllerPage extends HookConsumerWidget {
                   "${backupState.allUniqueAssets.length - backupState.selectedAlbumsBackupAssetsIds.length}",
             ),
             const Divider(),
-            _buildBackupController(),
+            _buildAutoBackupController(),
             const Divider(),
             _buildStorageInformation(),
             const Divider(),
@@ -479,7 +467,7 @@ class BackupControllerPage extends HookConsumerWidget {
                             style: ElevatedButton.styleFrom(
                               primary: Colors.red[300],
                               onPrimary: Colors.grey[50],
-                              padding: const EdgeInsets.all(14),
+                              // padding: const EdgeInsets.all(14),
                             ),
                             onPressed: () {
                               ref.read(backupProvider.notifier).cancelBackup();
@@ -493,11 +481,6 @@ class BackupControllerPage extends HookConsumerWidget {
                             ).tr(),
                           )
                         : ElevatedButton(
-                            style: ElevatedButton.styleFrom(
-                              primary: Theme.of(context).primaryColor,
-                              onPrimary: Colors.grey[50],
-                              padding: const EdgeInsets.all(14),
-                            ),
                             onPressed: shouldBackup ? startBackup : null,
                             child: const Text(
                               "backup_controller_page_start_backup",