Merge dfa52d173667e2222316473ae2b141229bd348e5 into e1739ac4fc7301ee3c5f6d9dc8d10e4e828e03af

web/src/lib/components/shared-components/theme-button.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { browser } from '$app/environment';
   import { colorTheme } from '$lib/stores/preferences.store';
   import IconButton from '../elements/buttons/icon-button.svelte';
 
+  import { appearanceSettings } from '../../stores/preferences.store';
+
   const toggleTheme = () => {
     $colorTheme = $colorTheme === 'dark' ? 'light' : 'dark';
   };
 
-  $: {
+  function checkSystemTheme() {
+    if($appearanceSettings.autoTheme) {
+      const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      $colorTheme = darkModeMediaQuery.matches ? 'dark' : 'light';
+      changeTheme()
+    }
+  };
+
+  function changeTheme() {
     if (browser) {
       if ($colorTheme === 'light') {
         document.documentElement.classList.remove('dark');
@@ -15,7 +26,21 @@
         document.documentElement.classList.add('dark');
       }
     }
+  };
+
+  $: {
+    const theme = $colorTheme;
+    changeTheme();
+  }
+
+  $: {
+    const autoTheme = $appearanceSettings.autoTheme;
+    checkSystemTheme();
   }
+
+  onMount(() => {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', checkSystemTheme);
+  });
 </script>
 
 <IconButton on:click={toggleTheme} title="Toggle theme">

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { appearanceSettings } from '../../stores/preferences.store';
+  import SettingSwitch from '../admin-page/settings/setting-switch.svelte';
+</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={$appearanceSettings.autoTheme} />
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -11,6 +11,7 @@
   import OAuthSettings from './oauth-settings.svelte';
   import PartnerSettings from './partner-settings.svelte';
   import SidebarSettings from './sidebar-settings.svelte';
+  import AppearanceSettings from './appearance-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
 
@@ -33,6 +34,10 @@
   <UserAPIKeyList bind:keys />
 </SettingAccordion>
 
+<SettingAccordion title="Appearance" subtitle="Manage the appearance of Immich">
+  <AppearanceSettings />
+</SettingAccordion>
+
 <SettingAccordion title="Authorized Devices" subtitle="Manage your logged-in devices">
   <DeviceList bind:devices />
 </SettingAccordion>

web/src/lib/stores/preferences.store.ts

@@ -57,6 +57,14 @@ export const sidebarSettings = persisted<SidebarSettings>('sidebar-settings-1',
   sharing: true,
 });
 
+export interface AppearanceSettings {
+  autoTheme: boolean;
+}
+
+export const appearanceSettings = persisted<AppearanceSettings>('appearance-settings-1', {
+  autoTheme: false,
+});
+
 export enum AlbumViewMode {
   Cover = 'Cover',
   List = 'List',