implemented mode change

components/server/IssueTable.vue

@@ -25,7 +25,7 @@
                     <td
                         :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="goToChosenIssue(issue.primaryID)">
                             {{ issue.name }}
                         </nuxt-link>
@@ -53,6 +53,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenIssue = (id) => {
     store.commit('setChosenIssue', id);
     store.commit('changeToIssueItem');
@@ -62,7 +64,7 @@ const stateFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const issueSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('');
 const issues = ref([]);
 
 // update search term
@@ -113,7 +115,27 @@ const searchIssue = async () => {
 watch(stateFilter, getIssues);
 watch(searchable, updateSearchTerm);
 
+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 getIssues();
 });
 </script>
@@ -178,9 +200,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .issue-search {
     display: flex;
     align-items: center;