feat: upgrade immich/ui (#27792)

web/src/lib/components/QueueGraph.svelte

@@ -3,7 +3,7 @@
   import { queueManager } from '$lib/managers/queue-manager.svelte';
   import type { QueueSnapshot } from '$lib/types';
   import type { QueueResponseDto } from '@immich/sdk';
-  import { LoadingSpinner, Theme, theme } from '@immich/ui';
+  import { LoadingSpinner, Theme, themeManager } from '@immich/ui';
   import { DateTime } from 'luxon';
   import { onMount } from 'svelte';
   import uPlot, { type AlignedData, type Axis } from 'uplot';
@@ -55,7 +55,7 @@
   const data = $derived(normalizeData(queueManager.snapshots));
 
   let chartElement: HTMLDivElement | undefined = $state();
-  let isDark = $derived(theme.value === Theme.Dark);
+  let isDark = $derived(themeManager.value === Theme.Dark);
   let plot: uPlot;
 
   const axisOptions: Axis = {
@@ -138,7 +138,7 @@
 
   const onThemeChange = () => plot?.redraw(false);
 
-  $effect(() => theme.value && onThemeChange());
+  $effect(() => themeManager.value && onThemeChange());
 
   onMount(() => {
     plot = new uPlot(options, data as AlignedData, chartElement);

web/src/lib/components/onboarding-page/onboarding-theme.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
-  import { Theme } from '$lib/constants';
-  import { themeManager } from '$lib/managers/theme-manager.svelte';
-  import { Icon } from '@immich/ui';
+  import { Icon, themeManager, ThemePreference } from '@immich/ui';
   import { t } from 'svelte-i18n';
 </script>
 
@@ -13,7 +11,7 @@
     <button
       type="button"
       class="w-1/2 aspect-square bg-light dark:bg-dark rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-primary dark:border dark:border-transparent"
-      onclick={() => themeManager.setTheme(Theme.LIGHT)}
+      onclick={() => themeManager.setPreference(ThemePreference.Light)}
     >
       <div
         class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
@@ -25,7 +23,7 @@
     <button
       type="button"
       class="w-1/2 aspect-square bg-dark dark:bg-light rounded-3xl transition-all shadow-sm hover:shadow-xl dark:border-[3px] dark:border-immich-dark-primary border border-transparent"
-      onclick={() => themeManager.setTheme(Theme.DARK)}
+      onclick={() => themeManager.setPreference(ThemePreference.Dark)}
     >
       <div
         class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"

web/src/lib/components/shared-components/map/map.svelte

@@ -11,14 +11,12 @@
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import { Theme } from '$lib/constants';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
-  import { themeManager } from '$lib/managers/theme-manager.svelte';
   import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
   import { mapSettings } from '$lib/stores/preferences.store';
   import { getAssetMediaUrl, handlePromiseError } from '$lib/utils';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
-  import { Icon, modalManager } from '@immich/ui';
+  import { Icon, modalManager, Theme, themeManager } from '@immich/ui';
   import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
   import { isEqual, omit } from 'lodash-es';
@@ -106,9 +104,9 @@
   let marker: Marker | null = null;
   let abortController: AbortController;
 
-  const theme = $derived($mapSettings.allowDarkMode ? themeManager.value : Theme.LIGHT);
+  const mapTheme = $derived($mapSettings.allowDarkMode ? themeManager.value : Theme.Light);
   const styleUrl = $derived(
-    theme === Theme.DARK ? serverConfigManager.value.mapDarkStyleUrl : serverConfigManager.value.mapLightStyleUrl,
+    mapTheme === Theme.Dark ? serverConfigManager.value.mapDarkStyleUrl : serverConfigManager.value.mapLightStyleUrl,
   );
 
   export function addClipMapMarker(lng: number, lat: number) {

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

@@ -1,24 +1,7 @@
 <script lang="ts">
-  import { shortcut } from '$lib/actions/shortcut';
-  import { Theme } from '$lib/constants';
-  import { themeManager } from '$lib/managers/theme-manager.svelte';
-  import { ThemeSwitcher } from '@immich/ui';
-
-  const handleToggleTheme = () => {
-    if (themeManager.theme.system) {
-      return;
-    }
-
-    themeManager.toggleTheme();
-  };
+  import { themeManager, ThemePreference, ThemeSwitcher } from '@immich/ui';
 </script>
 
-<svelte:window use:shortcut={{ shortcut: { key: 't', alt: true }, onShortcut: () => handleToggleTheme() }} />
-
-{#if !themeManager.theme.system}
-  <ThemeSwitcher
-    size="medium"
-    color="secondary"
-    onChange={(theme) => themeManager.setTheme(theme == 'dark' ? Theme.DARK : Theme.LIGHT)}
-  />
+{#if themeManager.preference !== ThemePreference.System}
+  <ThemeSwitcher size="medium" color="secondary" />
 {/if}

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

@@ -3,7 +3,6 @@
   import SettingCombobox from '$lib/components/shared-components/settings/setting-combobox.svelte';
   import SettingsLanguageSelector from '$lib/components/shared-components/settings/settings-language-selector.svelte';
   import { fallbackLocale, locales } from '$lib/constants';
-  import { themeManager } from '$lib/managers/theme-manager.svelte';
   import {
     alwaysLoadOriginalFile,
     alwaysLoadOriginalVideo,
@@ -14,7 +13,7 @@
     showDeleteModal,
   } from '$lib/stores/preferences.store';
   import { createDateFormatter, findLocale } from '$lib/utils';
-  import { Field, Switch, Text } from '@immich/ui';
+  import { Field, Switch, Text, Theme, themeManager, ThemePreference } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -55,13 +54,21 @@
     value: findLocale(editedLocale).code || fallbackLocale.code,
     label: findLocale(editedLocale).name || fallbackLocale.name,
   });
+
+  const handleToggleSystemTheme = (checked: boolean) => {
+    const current = themeManager.value === Theme.Dark ? ThemePreference.Dark : ThemePreference.Light;
+    themeManager.setPreference(checked ? ThemePreference.System : current);
+  };
 </script>
 
 <section class="my-4">
   <div in:fade={{ duration: 500 }}>
     <div class="sm:ms-8 flex flex-col gap-6">
       <Field label={$t('theme_selection')} description={$t('theme_selection_description')}>
-        <Switch checked={themeManager.theme.system} onCheckedChange={(checked) => themeManager.setSystem(checked)} />
+        <Switch
+          checked={themeManager.preference === ThemePreference.System}
+          onCheckedChange={handleToggleSystemTheme}
+        />
       </Field>
 
       <SettingsLanguageSelector showSettingDescription />

web/src/lib/components/workflows/WorkflowJsonEditor.svelte

@@ -1,7 +1,17 @@
 <script lang="ts">
-  import { themeManager } from '$lib/managers/theme-manager.svelte';
   import type { WorkflowPayload } from '$lib/services/workflow.service';
-  import { Button, Card, CardBody, CardDescription, CardHeader, CardTitle, Icon, VStack } from '@immich/ui';
+  import {
+    Button,
+    Card,
+    CardBody,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+    Icon,
+    Theme,
+    themeManager,
+    VStack,
+  } from '@immich/ui';
   import { mdiCodeJson } from '@mdi/js';
   import { JSONEditor, Mode, type Content, type OnChangeStatus } from 'svelte-jsoneditor';
 
@@ -15,7 +25,7 @@
 
   let content: Content = $derived({ json: jsonContent });
   let canApply = $state(false);
-  let editorClass = $derived(themeManager.isDark ? 'jse-theme-dark' : '');
+  let editorClass = $derived(themeManager.value === Theme.Dark ? 'jse-theme-dark' : '');
 
   const handleChange = (updated: Content, _: Content, status: OnChangeStatus) => {
     if (status.contentErrors) {