implemented mode change

components/TemplateSearch.vue

@@ -4,21 +4,49 @@
     <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
   </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('');
+
+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();
+});
 </script>
 
 <script>
 export default {
   name: "TemplateSearch",
 };
-</script> 
+</script>
+
 
-  
 <style scoped>
 .template-search {
   display: flex;
@@ -78,5 +106,4 @@ export default {
   background-color: #EBEBEB;
   color: #000;
 }
-</style>
-  
+</style>