From 0b79998fffd07e77f632054e1fb0765cec23d64c Mon Sep 17 00:00:00 2001
From: jakub961241 <144362244+jakub961241@users.noreply.github.com>
Date: Sun, 22 Mar 2026 02:04:38 +0100
Subject: [PATCH] fix: auto theme does not switch when OS changes day/night
 mode (#6813)

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 b4e79caa9486..541664e4d646 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,
     };