implemented mode change

components/server/OrderingInformation.vue

@@ -147,6 +147,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
@@ -159,7 +161,7 @@ const newPrice = ref('');
 const newComment = ref('');
 
 const newOIs = reactive([]);
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // delete new todo row
 const deleteNewRow = () => {
@@ -274,12 +276,32 @@ const deleteOrderingInfo = async (id) => {
         } catch (err) {
             console.log(err.response.statusText);
         }
-    } 
+    }
     await getOIById();
 }
 
-onMounted(() => {
-    getOIById();
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getOIById();
 });
 </script>