implemented mode change

components/server/Issue.vue

@@ -89,12 +89,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const issue = ref({});
 const issues = ref([]);
 
@@ -207,9 +209,28 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
 }
 
 watch(deleteBool, confirmDeleteIssue);
+watch(modeChanged, getSession)
 
-onMounted(() => {
-    getIssueById();
+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
+    }
+}
+
+onMounted(async () => {
+    await getSession();
+    await getIssueById();
     triggerBackendCallsWithDelay(getIssues);
 });
 </script>