implemented mode change

components/server/AssetTable.vue

@@ -32,7 +32,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/assets" 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="goToChosenAsset(item.primaryID)">
                             {{ item.assetName }}
                         </nuxt-link>
@@ -49,7 +49,7 @@
         </table>
     </div>
 </template>
-  
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -59,6 +59,9 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenAsset = (id) => {
     store.commit('setChosenAsset', id);
     store.commit('changeToAsset');
@@ -67,7 +70,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const assetSearchable = computed(() => store.state.searchable);
 
 const assetSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('')
 const configItemList = ref([]);
 
 // update search term
@@ -114,10 +117,29 @@ const searchConfigItem = async () => {
     }
 }
 
+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(customerFilter, getConfigItems);
 watch(assetSearchable, updateSearchTerm);
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    await getSession();
     await getConfigItems();
 });
 </script>
@@ -126,9 +148,9 @@ onMounted(async () => {
 export default {
     name: "AssetTable",
 };
-</script>    
-    
-    
+</script>
+
+
 <style scoped>
 .data {
     display: flex;
@@ -336,6 +358,13 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>