implemented mode change

components/server/AssetSolutionList.vue

@@ -24,7 +24,7 @@
                     <td
                         :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
                         <nuxt-link to="/solutions" 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="goToChosenSolution(sol.primaryID)">
                             {{ sol.solutionName }}
                         </nuxt-link>
@@ -45,6 +45,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const searchable = computed(() => store.state.searchable);
 const filtered = computed(() => store.state.filtered);
@@ -55,7 +57,7 @@ const asset = ref({});
 const solutions = ref([]);
 const solutionsBySol = ref([]);
 const solutionsByType = ref([]);
-const darkMode = ref(true)
+const darkMode = ref('')
 
 //get all solutions from the chosen asset
 const getSolutions = async () => {
@@ -114,18 +116,18 @@ const searchSolution = async () => {
 
 //get all solutions based on the searched solution name
 const filterSolutionByType = async () => {
-        if (typeSearchFilter.value === '') {
-            await getSolutions();
-        } else {
-            try {
-                const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
-                solutionsByType.value = response.data;
-                solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
-            } catch (err) {
-                console.log(err.response.statusText);
-            }
+    if (typeSearchFilter.value === '') {
+        await getSolutions();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
+            solutionsByType.value = response.data;
+            solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
+        } catch (err) {
+            console.log(err.response.statusText);
         }
     }
+}
 
 const filterObjectsWithMatchingIds = (arr1, arr2) => {
     return arr1.filter(obj1 => {
@@ -136,7 +138,27 @@ const filterObjectsWithMatchingIds = (arr1, arr2) => {
 watch(searchable, updateSearchTerm);
 watch(filtered, updateFilterTerm);
 
-onMounted(() => {
+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 () => {
+    await getSession();
     getItemById();
 });
 </script>
@@ -181,6 +203,14 @@ export default {
     letter-spacing: 0.05em;
 }
 
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -244,7 +274,6 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
-    color: white;
 }
 
 .tr-head-darkmode {