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

@@ -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,
     };