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