diff --git a/next-ui/src/App.vue b/next-ui/src/App.vue
index 9677c3cbd..f39946ec1 100644
--- a/next-ui/src/App.vue
+++ b/next-ui/src/App.vue
@@ -9,28 +9,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useTheme } from 'vuetify'
-import { useAppStore } from '@/stores/app'
-import { usePreferredDark } from '@vueuse/core'
+import { useThemeWatcher } from '@/composables/themeWatcher'
 
-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
-  }
-}
-
-watch([() => appStore.theme, prefersDark], ([selectedTheme, prefersDark]) =>
-  updateTheme(selectedTheme, prefersDark),
-)
-
-// trigger an update on startup to get the proper theme loaded
-updateTheme(appStore.theme, prefersDark.value)
+useThemeWatcher()
 </script>
 
 <style>
diff --git a/next-ui/src/composables/themeWatcher.ts b/next-ui/src/composables/themeWatcher.ts
new file mode 100644
index 000000000..8b256ac17
--- /dev/null
+++ b/next-ui/src/composables/themeWatcher.ts
@@ -0,0 +1,24 @@
+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
+    }
+  }
+
+  watch([() => appStore.theme, prefersDark], ([selectedTheme, prefersDark]) =>
+    updateTheme(selectedTheme, prefersDark),
+  )
+
+  // trigger an update on startup to get the proper theme loaded
+  updateTheme(appStore.theme, prefersDark.value)
+}