implemented mode change

components/server/Employee.vue

@@ -138,12 +138,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenEmployeeId = computed(() => store.state.chosenEmployeeId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const employee = ref({});
 
 const newUsername = ref('');
@@ -287,8 +289,28 @@ const validatePostcode = (postcode) => {
 
 watch(deleteBool, confirmDeleteEmployee);
 
-onMounted(() => {
-    getEmployeeById();
+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();
+    await getEmployeeById();
 });
 </script>