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/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());

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,
           )
         ],
       ),

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: [