implemented mode change

components/AssetSearch.vue

@@ -4,20 +4,22 @@
         <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ asset.assetName }}</pre>
     </section>
 </template>
-    
-    
+
+
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 
 const asset = ref({});
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // get config item from id
 const getItemById = async () => {
@@ -31,19 +33,38 @@ const getItemById = async () => {
     }
 }
 
-onMounted(() => {
-    getItemById();
-});
+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 getItemById();
+});
 </script>
-  
+
 <script>
 export default {
     name: "AssetSearch",
 };
-</script> 
-  
-    
+</script>
+
+
 <style scoped>
 .asset-search {
     display: flex;
@@ -103,5 +124,4 @@ export default {
     background-color: #EBEBEB;
     color: #000;
 }
-</style>
-    
+</style>