feat(web): auto switch theme (#6176)

* move from app.html to user-page-layout.svelte

* fix: use layout.svelte

* simplify

* fix: map style don't change

* fix: auto switch theme map

* use constants

* simplify

* rename

* rename settign

* fix: remove

* pr feedback

* fix: tests

* fix: migration

* fix: migration

* pr feedback

* simplify

* simplify

* pr feedback

* fix: merge

* chore: set insetad of toggle on click

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/lib/components/user-settings-page/appearance-settings.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { colorTheme } from '../../stores/preferences.store';
+  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+
+  export const handleToggle = () => {
+    $colorTheme.system = !$colorTheme.system;
+  };
+</script>
+
+<section class="my-4">
+  <div in:fade={{ duration: 500 }}>
+    <div class="ml-4 mt-4 flex flex-col gap-4">
+      <div class="ml-4">
+        <SettingSwitch
+          title="Theme selection"
+          subtitle="Automatically set the theme to light or dark based on your browser's system preference"
+          bind:checked={$colorTheme.system}
+          on:toggle={handleToggle}
+        />
+      </div>
+    </div>
+  </div>
+</section>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -14,6 +14,7 @@
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
   import { user } from '$lib/stores/user.store';
+  import AppearanceSettings from './appearance-settings.svelte';
 
   export let keys: APIKeyResponseDto[] = [];
   export let devices: AuthDeviceResponseDto[] = [];
@@ -24,6 +25,10 @@
   }
 </script>
 
+<SettingAccordion title="Appearance" subtitle="Manage your Immich appearance">
+  <AppearanceSettings />
+</SettingAccordion>
+
 <SettingAccordion title="Account" subtitle="Manage your account">
   <UserProfileSettings user={$user} />
 </SettingAccordion>