From 57e0835b4667dc03b85c855311a40a8d095b9b31 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Thu, 5 Feb 2026 14:36:20 +0100
Subject: [PATCH] fix: ensure theme stays in sync with @immich/ui (#25922)

---
 web/src/lib/managers/theme-manager.svelte.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/managers/theme-manager.svelte.ts b/web/src/lib/managers/theme-manager.svelte.ts
index 26c3fe31d5..0ce0172c1a 100644
--- a/web/src/lib/managers/theme-manager.svelte.ts
+++ b/web/src/lib/managers/theme-manager.svelte.ts
@@ -2,7 +2,7 @@ import { browser } from '$app/environment';
 import { Theme } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import { PersistedLocalStorage } from '$lib/utils/persisted';
-import { theme as uiTheme, type Theme as UiTheme } from '@immich/ui';
+import { onThemeChange as onUiThemeChange, theme as uiTheme, type Theme as UiTheme } from '@immich/ui';
 
 export interface ThemeSetting {
   value: Theme;
@@ -55,15 +55,14 @@ class ThemeManager {
   }
 
   #onAppInit() {
-    globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener(
-      'change',
-      () => {
-        if (this.theme.system) {
-          this.#update('system');
-        }
-      },
-      { passive: true },
-    );
+    const syncSystemTheme = () => {
+      this.#update(this.theme.system ? 'system' : this.theme.value);
+    };
+
+    syncSystemTheme();
+    globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', syncSystemTheme, {
+      passive: true,
+    });
   }
 
   #update(value: Theme | 'system') {
@@ -75,6 +74,7 @@ class ThemeManager {
     this.#theme.current = theme;
 
     uiTheme.value = theme.value as unknown as UiTheme;
+    onUiThemeChange();
 
     eventManager.emit('ThemeChange', theme);
   }