diff --git a/next-ui/src/composables/themeWatcher.ts b/next-ui/src/composables/themeWatcher.ts
index 8b256ac17..929063066 100644
--- a/next-ui/src/composables/themeWatcher.ts
+++ b/next-ui/src/composables/themeWatcher.ts
@@ -1,24 +1,19 @@
 import { useTheme } from 'vuetify'
 import { useAppStore } from '@/stores/app'
-import { usePreferredDark } from '@vueuse/core'
 
 export function useThemeWatcher() {
   const appStore = useAppStore()
   const theme = useTheme()
-  const prefersDark = usePreferredDark()
 
-  function updateTheme(selectedTheme: string, prefersDark: boolean) {
-    if (selectedTheme === 'system') {
-      theme.global.name.value = prefersDark ? 'dark' : 'light'
-    } else {
-      theme.global.name.value = selectedTheme
-    }
+  function updateTheme(selectedTheme: string) {
+    theme.change(selectedTheme)
   }
 
-  watch([() => appStore.theme, prefersDark], ([selectedTheme, prefersDark]) =>
-    updateTheme(selectedTheme, prefersDark),
+  watch(
+    () => appStore.theme,
+    (selectedTheme) => updateTheme(selectedTheme),
   )
 
   // trigger an update on startup to get the proper theme loaded
-  updateTheme(appStore.theme, prefersDark.value)
+  updateTheme(appStore.theme)
 }