implemented mode change

components/server/IssueVariant.vue

@@ -8,8 +8,8 @@
             <div class="variantOf">
                 <div class="data-field" id="variantOf">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
-                    <pre
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issueItems" id="nuxt-link" class="button" @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issueItems" id="nuxt-link" :class="['button', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+ @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
                 </div>
             </div>
             <div class="info">
@@ -59,6 +59,8 @@ 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 chosenIssueVariantId = computed(() => store.state.chosenIssueVariantId);
@@ -172,11 +174,30 @@ const getIssueById = async () => {
     }
 }
 
-watch(deleteBool, confirmDeleteIssueVariant);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getIssueVariantById();
-    getIssueById();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteIssueVariant);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getIssueVariantById();
+    await getIssueById();
     triggerBackendCallsWithDelay(getIssueVariants);
 });
 
@@ -378,6 +399,13 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>