implemented mode change

components/server/IssueVariants.vue

@@ -24,7 +24,7 @@
                     <td v-if="!editable"
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/issueItems" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenIssueVariant(issueVar.primaryID)">
                             {{ issueVar.name }}
                         </nuxt-link>
@@ -185,7 +185,7 @@ const newAmount = computed(() => store.state.newAmountII);
 const newProperties = computed(() => store.state.newPropertiesII);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const issueVariants = ref([])
 const issue = ref({})
@@ -411,9 +411,27 @@ const getAllIssues = async () => {
     }
 }
 
-onMounted(() => {
-    getIssueVariantsById();
-    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 () => {
+    getSession();
+    await getIssueVariantsById();
+    await getIssueById();
     triggerBackendCallsWithDelay(getAllIssues);
 });
 </script>
@@ -739,6 +757,13 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>