diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte
index 232068cce..b7262d489 100644
--- a/packages/web/src/Screen.svelte
+++ b/packages/web/src/Screen.svelte
@@ -12,7 +12,7 @@
     visibleCommandPalette,
     visibleTitleBar,
     visibleToolbar,
-    getSystemTheme,
+    systemThemeStore,
   } from './stores';
   import TabsPanel from './tabpanel/TabsPanel.svelte';
   import TabRegister from './tabpanel/TabRegister.svelte';
@@ -51,7 +51,7 @@
 </div>
 
 <div
-  class={`${$currentTheme ?? getSystemTheme()} ${currentThemeType} root dbgate-screen`}
+  class={`${$currentTheme ?? $systemThemeStore} ${currentThemeType} root dbgate-screen`}
   class:isElectron
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 45a7ce616..b18ccd3e2 100644
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -26,8 +26,18 @@ export interface TabDefinition {
   focused?: boolean;
 }
 
+const darkModeMediaQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+
+const systemThemeStore = writable(darkModeMediaQuery?.matches ? 'theme-dark' : 'theme-light');
+
+if (darkModeMediaQuery) {
+  darkModeMediaQuery.addEventListener('change', e => {
+    systemThemeStore.set(e.matches ? 'theme-dark' : 'theme-light');
+  });
+}
+
 export function getSystemTheme() {
-  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'theme-dark' : 'theme-light';
+  return darkModeMediaQuery?.matches ? 'theme-dark' : 'theme-light';
 }
 
 export function writableWithStorage<T>(defaultValue: T, storageName, removeCondition?: (value: T) => boolean) {
@@ -207,10 +217,13 @@ currentTheme.subscribe(value => {
 });
 export const getCurrentTheme = () => currentThemeValue;
 
-export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) => {
-  const usedTheme = $currentTheme ?? getSystemTheme();
-  return $extensions?.themes?.find(x => x.themeClassName == usedTheme);
-});
+export const currentThemeDefinition = derived(
+  [currentTheme, extensions, systemThemeStore],
+  ([$currentTheme, $extensions, $systemTheme]) => {
+    const usedTheme = $currentTheme ?? $systemTheme;
+    return $extensions?.themes?.find(x => x.themeClassName == usedTheme);
+  }
+);
 currentThemeDefinition.subscribe(value => {
   if (value?.themeType && getCurrentTheme()) {
     localStorage.setItem('currentThemeType', value?.themeType);