implemented mode change

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
+  <main :class="[loggedInUserDarkModeBoolean ? 'main-darkmode' : 'main-lightmode']">
     <Navigationbar />
     <slot />
     <Actionbar />
@@ -9,22 +9,49 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import PageHeader from "./PageHeader.vue";
 import Navigationbar from "./Navigationbar.vue";
 import Actionbar from "./Actionbar.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
-  
+
 <script>
 export default {
   name: "default",
 }
 </script>
-  
+
 <style scoped>
 * {
   box-sizing: border-box;