From 22e9d8ec6d3e65812a564121acfdbb40417ee046 Mon Sep 17 00:00:00 2001
From: bwees <brandonwees@gmail.com>
Date: Mon, 26 May 2025 14:14:59 -0500
Subject: [PATCH] use theme switcher from UI lib

---
 .../shared-components/theme-button.svelte      | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/shared-components/theme-button.svelte b/web/src/lib/components/shared-components/theme-button.svelte
index e266436e53..7493770340 100644
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@@ -1,21 +1,13 @@
 <script lang="ts">
+  import { Theme } from '$lib/constants';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
-  import { IconButton } from '@immich/ui';
-  import { mdiWeatherNight, mdiWhiteBalanceSunny } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  let icon = $derived(themeManager.isDark ? mdiWhiteBalanceSunny : mdiWeatherNight);
+  import { ThemeSwitcher } from '@immich/ui';
 </script>
 
 {#if !themeManager.theme.system}
-  <IconButton
-    aria-label={$t('toggle_theme')}
-    {icon}
-    role="switch"
-    aria-checked={themeManager.isDark ? 'true' : 'false'}
-    onclick={() => themeManager.toggleTheme()}
+  <ThemeSwitcher
+    size="medium"
     color="secondary"
-    variant="ghost"
-    shape="round"
+    onChange={(theme) => themeManager.setTheme(theme == 'dark' ? Theme.DARK : Theme.LIGHT)}
   />
 {/if}