diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 9c076d98c..e4da463c5 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,8 +1,17 @@
 <script setup>
-import { useQuasar } from 'quasar';
+import { onMounted, computed } from 'vue';
+import { Dark, Quasar, useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
 
 const quasar = useQuasar();
+const darkMode = computed({
+    get() {
+        return Dark.isActive;
+    },
+    set(value) {
+        Dark.set(value);
+    },
+});
 </script>
 
 <template>