From 5a80931a4980486aa63cd831e02480bb8b5e561d Mon Sep 17 00:00:00 2001
From: jakub961241 <144362244+jakub961241@users.noreply.github.com>
Date: Mon, 23 Mar 2026 07:57:15 +0100
Subject: [PATCH] fix: auto theme does not switch when OS changes day/night
 mode (#6813) (#12278)

When theme is set to "auto" (follow system), changing the OS from
light to dark (or vice versa) without reloading the page had no
effect. The theme was only evaluated once on page load.

Added a matchMedia 'change' event listener that calls switchTheme()
whenever the OS color scheme changes, but only when theme is "auto".
Listener is properly cleaned up on component unmount.

Fixes #6813 (point 1)
---
 frontend/src/global/use-theme.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/frontend/src/global/use-theme.ts b/frontend/src/global/use-theme.ts
index b4e79caa9..541664e4d 100644
--- a/frontend/src/global/use-theme.ts
+++ b/frontend/src/global/use-theme.ts
@@ -1,3 +1,4 @@
+import { onUnmounted } from 'vue';
 import { GlobalStore } from '@/store';
 import { setPrimaryColor } from '@/utils/theme';
 
@@ -26,6 +27,19 @@ export const useTheme = () => {
         }
     };
 
+    // Listen for OS theme changes when theme is set to "auto"
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const onSystemThemeChange = () => {
+        const globalStore = GlobalStore();
+        if (globalStore.themeConfig.theme === 'auto') {
+            switchTheme();
+        }
+    };
+    mediaQuery.addEventListener('change', onSystemThemeChange);
+    onUnmounted(() => {
+        mediaQuery.removeEventListener('change', onSystemThemeChange);
+    });
+
     return {
         switchTheme,
     };